animation 属性
动画属性：
1、animation-name：规定需要绑定到选择器的 keyframe 名称。
2、animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
3、animation-timing-function：规定动画的速度曲线。
4、animation-delay：规定在动画开始之前的延迟。
5、animation-iteration-count：规定动画应该播放的次数。
6、animation-direction：规定是否应该轮流反向播放动画。
实例：
1、流星效果：
.start1{ left: 1000px; width: 170px; height: 170px; position: absolute; margin: 0px; background:url(../../img/95858PICKE3.png); background-size: 170px 170px; animation:mymove1 3s infinite,fadeIn1 3s infinite;/*无限播放*/ animation-delay:0s; animation-timing-function: linear;/*动画匀速进行*/ } /*移动动画*/ @-webkit-keyframes mymove1 { from {left:1100px;top:50px} to {left:900px;top:250px} } /*关键帧改变透明度*/ @-webkit-keyframes fadeIn1 { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% { opacity: 0.5; /*中间状态 透明度为0.5*/ } 100%,24% { opacity: 0; /*结尾状态 透明度为0*/ } }
规定两个动画同时进行，使两者同步
2、时钟效果
/*指针div*/ .zhizhen{ position: absolute; top: 180px; left: 220px; width: 300px; height: 300px; background: url(../../img/img_index.png)no-repeat; animation-duration: 2s;/*动画时长*/ animation-timing-function: ease;/*动画执行一次*/ animation-delay: 0s;/*动画间隔*/ animation-direction: normal;/*动画正常播放*/ animation-fill-mode: both;/*动画保持在最后一帧*/ animation-iteration-count: 1;/*动画次数*/ animation-play-state: running;/*动画进行*/ animation-name: watchHand;/*动画名称*/ } /*指针摆动效果*/ @-webkit-keyframes watchHand{ 0% { transform: rotate(0deg); } 70% { transform: rotate(253deg); } 80% { transform: rotate(248deg); } 90% { transform: rotate(251deg); } 100% { transform: rotate(250deg);/*旋转角度*/ } }
3、数字翻动效果
/*数字翻动动画*/ .shuzi_1{ width: 40px; height:50px; position: absolute; top: 400px; left: 335px; overflow: hidden; background: url(../../img/watch_numb.png); animation-duration: 1.5s;/*动画时长4s*/ animation-timing-function: steps(6, end);/*动画分为六部进行过渡，在完成6次过度停止*/ animation-delay: 0s;/*动画等待时间*/ animation-direction: normal;/*动画正常播放*/ animation-fill-mode: both;/*动画保持在最后一帧*/ animation-iteration-count: 1;/*动画次数*/ animation-play-state: running;/*动画进行*/ animation-name: watchNumb1;/*动画名称*/ } @-webkit-keyframes watchNumb1{ 0% { background-position: 0px 0px; } 100% { background-position: 0px -300px;/*位置移动*/ } } .shuzi_2{ width: 40px; height:50px; position: absolute; top: 400px; left: 375px; overflow: hidden; background: url(../../img/watch_numb.png); animation-duration: 0.5s;/*动画时长0.5s*/ animation-timing-function: steps(10, end);/*动画分为十部进行过渡，在完成十次过渡停止*/ animation-delay: 0s;/*动画等待时间*/ animation-direction: normal;/*动画正常播放*/ animation-fill-mode: none;/*动画正常进行*/ animation-iteration-count: 3;/*动画次数*/ animation-play-state: running;/*动画进行*/ animation-name: watchNumb2;/*动画名称*/ } @-webkit-keyframes watchNumb2{ 0% { background-position: 0px 0px; } 100% { background-position: 0px -500px;/*位置移动*/ } }
衍申：利用div的超出隐藏和position定位改变可以实现许多动画效果
原文：https://www.cnblogs.com/Ace-suiyuan008/p/9280151.html