1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动画帧</title> 6 <style type="text/css"> 7 .box{ 8 width:100px; 9 height:100px; 10 background:red; 11 animation-name:fromLeftToRight; 12 animation-duration:5s; 13 /* 播放次数 （无限循环） */ 14 -webkit-animation-iteration-count:infinite; 15 float:right; 16 /* 浮动可以设置开始位置 */ 17 } 18 /* 定义动画 */ 19 @keyframes fromLeftToRight{ 20 from{ 21 /* 设置开始位置 */ 22 margin-right:0; 23 } 24 to{ 25 margin-right:1024px; 26 transform:rotate(720deg); 27 } 28 } 29 /* box:hover{ 30 -webkit-animation-play-state:paused 31 } */ 32 .two-box{ 33 width:200px; 34 height:200px; 35 background:blue; 36 animation-name:fromLeft; 37 animation-duration:5s; 38 /* 设置动画延迟的时间 */ 39 -webkit-animation-delay :2s; 40 /* 速度 减慢效果*/ 41 animation-timing-fuction:ease-out; 42 /* 设置动画的次数 */ 43 -webkit-animation-iteration-count:5; 44 /* float:left; 45 margin-top:20px; */ 46 47 } 48 @keyframes fromLeft{ 49 from{ 50 margin-left:0; 51 } 52 to{ 53 margin-left:1024px; 54 transform:rotate(720deg); 55 } 56 } 57 </style> 58 </head> 59 <body> 60 <div class="box"> 61 <p>自定义动画</p> 62 <p>根本停不下来</p> 63 </div> 64 <br><br> 65 <div class="two-box"> 66 <h1>自定义动画滚动1</h1> 67 <h2>自定义动画滚动2 animate.css</h2> 68 </div> 69 </body> 70 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{ 8 width:100px; 9 height:100px; 10 background:blue; 11 margin:2px; 12 animation-name:fromLeftToRight; 13 animation-duration:3s; 14 animation-iteration-count:infinite; 15 } 16 17 .reverse{ 18 -webkit-animation-direction:reverse; 19 background:red; 20 } 21 .alternate{ 22 animation-direction:alternate; 23 background:lightgreen; 24 } 25 .alternate-reverse{ 26 animation-direction:alternate-reverse; 27 background:yellow; 28 } 29 @keyframes fromLeftToRight{ 30 from{ 31 margin-left:0; 32 } 33 to{ 34 margin-left:1024px; 35 transform:rotate(1080deg); 36 } 37 </style> 38 </head> 39 <body> 40 <div class="box"></div> 41 <div class="box reverse"></div> 42 <div class="box alternate"></div> 43 <div class="box alternate-reverse"></div> 44 </body> 45 </html>