- A+
所属分类：Web前端
animation关键帧使用介绍：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:100px; height:100px; background:white; animation-name:hd; animation-duration:2s; } /* @keyframes hd{ from{ background:white; } to{ background:#e91e63; } } */ @keyframes hd{ 0%{ background:white; } 25%{ transform:scale(2); } 65%{ transform:scale(1); } 100%{ background:#e91e63; } } </style> </head> <body> <main></main> </body> </html>
帧顺序与起始与终点帧特性：
顺序颠倒不影响；
起点帧不写的话，是使用元素默认的状态；
终点帧不设置的话，也是会回到元素默认的状态；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:100px; height:100px; background:white; animation-name:hd; animation-duration:2s; } @keyframes hd{ 100%{ background:#e91e63; } 0%{ background:white; } } </style> </head> <body> <main></main> </body> </html>
移动的小方块：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:400px; height:400px; border:1px solid #ddd; } div{ width:100px; height:100px; background:pink; animation-name:hd; animation-duration:4s; } @keyframes hd{ 25%{ transform:translate(300px,0); } 50%{ transform:translate(300px,300px); } 75%{ transform:translate(0,300px); } } </style> </head> <body> <main> <div></div> </main> </body> </html>
同时声明关键帧规则：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:400px; height:400px; border:1px solid #ddd; } div{ width:100px; height:100px; background:pink; animation-name:hd; animation-duration:4s; } @keyframes hd{ 25%{ transform:translate(300px,0); } 50%{ transform:translate(300px,300px); background:pink; border-radius:0; } 75%{ transform:translate(0,300px); } 25%,75%{ background:#abcdef; border-radius:50%; } } </style> </head> <body> <main> <div></div> </main> </body> </html>
多个动画使用与时间配置：
当动画数量超过定义的动画时间数量时，多出的动画会从头循环时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:400px; height:400px; border:1px solid #ddd; } div{ width:100px; height:100px; background:pink; animation-name:translate,background; animation-duration:4s; animation-duration:4s,2s; } @keyframes translate{ 25%{ transform:translate(300px,0); } 50%{ transform:translate(300px,300px); } 75%{ transform:translate(0,300px); } } @keyframes background{ 25%{ background:#c9e91e; } 50%{ background:#ffc107; } 75%{ background:#2196f3; } } </style> </head> <body> <main> <div></div> </main> </body> </html>
属性重叠对动画的影响：
当属性重叠时，前面的会被后面的覆盖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:400px; height:400px; border:1px solid #ddd; } div{ width:100px; height:100px; background:pink; animation-name:translate,background; animation-duration:4s; animation-duration:4s,2s; } @keyframes translate{ 25%{ transform:translate(300px,0); } 50%{ transform:translate(300px,300px); } 75%{ transform:translate(0,300px); } } @keyframes background{ 25%{ background:#c9e91e; transform:translate(300px,0); } 50%{ background:#ffc107; } 75%{ background:#2196f3; } } </style> </head> <body> <main> <div></div> </main> </body> </html>
多动画控制移动端引导背景页：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ background-color: dimgrey; } main{ width:100vw; height:100vh; background-color: #34495e; transform:scale(0); animation-name:scale,background; animation-duration:2s; animation-fill-mode:forwards; display:flex; justify-content: center; align-items: center; } main::after{ content:'CYY'; color:white; font-size:2em; opacity:0; animation-name:opacity; animation-duration:1s; animation-delay:2s; animation-fill-mode:forwards; } @keyframes opacity{ to{ opacity:.8; } } @keyframes scale{ 25%{ transform:scale(.5); } 50%{ transform:scale(1) rotate(360deg); } 75%{ transform:scale(.5); } 100%{ transform:scale(1); } } @keyframes background{ 25%{ background:#c9e91e; } 50%{ background:#ffc107; } 75%{ background:#2196f3; } 100%{ background:#f48eb1; } } </style> </head> <body> <main> </main> </body> </html>
动画属性中间值详解：
有中间值的属性才可以进行动画，否则就是突变
animation-iteration-count 控制动画播放次数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } main{ width:400px; height:400px; border:1px solid #ddd; } div{ width:100px; height:100px; background:pink; animation-name:translate,background; animation-duration:2s; animation-iteration-count:2; animation-iteration-count:2,1; /* 无限循环 */ animation-iteration-count:infinite; } @keyframes translate{ 25%{ transform:translate(300px,0); } 50%{ transform:translate(300px,300px); } 75%{ transform:translate(0,300px); } } @keyframes background{ 25%{ background:#c9e91e; } 50%{ background:#ffc107; } 75%{ background:#2196f3; } } </style> </head> <body> <main> <div></div> </main> </body> </html>
使用变形绘制小心心：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } .heart{ width:200px; height:200px; background:#e93e1e; position:relative; transform:rotate(45deg) scale(.5); animation-name:hd; animation-duration:2s; animation-iteration-count:infinite; opacity:.5; } @keyframes hd{ 20%{ transform:rotate(45deg) scale(1); opacity:1; } 40%{ transform:rotate(45deg) scale(.5); opacity:.5; } 60%{ transform:rotate(45deg) scale(1); opacity:1; } 80%{ transform:rotate(45deg) scale(.5); opacity:.5; } 100%{ transform:rotate(45deg) scale(1); opacity:1; } } .heart::before{ content:''; width:200px; height:200px; background:#e93e1e; transform:translateX(-100px); position:absolute; border-radius:50%; } .heart::after{ content:''; width:200px; height:200px; background:#e93e1e; transform:translateY(-100px); position:absolute; border-radius:50%; } </style> </head> <body> <div class="heart"></div> </body> </html>
animation-direction 控制动画方向的四种模式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } ul{ width:400px; height:100px; list-style:none; display:flex; } li{ color:#e93e1e; flex:1; border:1px solid #ddd; display:flex; justify-content: center; position: relative;; } li span{ position:absolute; bottom:0; } li:nth-child(1)>i{ /* 默认值normal，不加也可以 */ /* 正向，循环时突变 */ animation-direction:normal; } li:nth-child(2)>i{ /* 反向，循环时突变 */ animation-direction:reverse; } li:nth-child(3)>i{ /* 正向，循环时过渡 */ animation-direction:alternate; } li:nth-child(4)>i{ /* 反向，循环时过渡 */ animation-direction:alternate-reverse; } i.fa{ font-size:3em; animation-name:scale; animation-duration:2s; animation-iteration-count:infinite; position:absolute; } @keyframes scale{ to{ transform:scale(2); } } </style> </head> <body> <ul> <li><i class="fa fa-heart" aria-hidden="true"></i><span>normal</span></li> <li><i class="fa fa-heart" aria-hidden="true"></i><span>reverse</span></li> <li><i class="fa fa-heart" aria-hidden="true"></i><span>alternate</span></li> <li><i class="fa fa-heart" aria-hidden="true"></i><span>alternate-reverse</span></li> </ul> </body> </html>
弹跳小球体验动画轮换衔接：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #34495e; } div{ width:100px; height:100px; background:radial-gradient(at center,#ffeb3b,#ff893b); border-radius:50%; animation-name:ball; animation-duration:.7s; animation-iteration-count:infinite; animation-direction:alternate-reverse; } section{ width:200px; height:40px; background:rgba(0,0,0,.3); border-radius:50%; position:absolute; transform:translateY(50px); z-index:-1; filter:blur(5px); animation-name:shadow; animation-duration:.7s; animation-iteration-count:infinite; animation-direction:alternate-reverse; } @keyframes shadow{ to{ height:20px; background:rgba(0,0,0,.1); filter:blur(35px); } } @keyframes ball{ to{ transform:translateY(-300px); } } </style> </head> <body> <div></div> <section></section> </body> </html>
