一、CSS3 过渡动画:
div { width:100px; height:100px; background:yellow; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } <div></div>
二、动画
animation:upDown 4s infinite; @keyframes upDown{ 0% {top:-0.8rem;} 50% {top:-1.1rem;} 100% {top:-0.8rem;} } @-webkit-keyframes upDown /* Safari 和 Chrome */ { 0% {top:-0.8rem;} 50% {top:-1.1rem;} 100% {top:-0.8rem;} } animation-iteration-count:1; /* 执行一次 */ animation-direction: normal|alternate;//是否应该轮流反向播放动画 normal 默认值。动画应该正常播放。 alternate 动画应该轮流反向播放。动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。注释:如果把动画设置为只播放一次,则该属性没有效果。
标签:动画,0.8,top,width,rem,播放,css From: https://www.cnblogs.com/redFeather/p/16745012.html