当前位置:Gxlcms > html代码 > csskeyframes动画属性设置_html/css_WEB-ITnose

csskeyframes动画属性设置_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:24人阅读

 1  2  3   4  5 css-keyframes 6  7   8  9 
10 11

 1 @-webkit-keyframes move{    //定义名为move的动画函数 目前chrome对其支持较好 所以加-webkit-前缀 2   0%{                       //时间达到0%时坐标位置为(0,0) 3     transform:translate(0px,0px);//应用该动画的标签位置为(0,0) 4   } 5   20%{ 6     transform:translate(100px,80px); 7   } 8   50%{ 9     transform:translate(200px,0px);10   }11   100%{12     transform:translate(400px,80px);13   }14 }15 div {16   width: 300px;17   height: 100px;18   background: blue;19   border:1px solid red;20   margin: 20px 100px;21 }22 span{23   display:inline-block;24   width:20px;25   height:20px;26   border-radius:10px;27   background:yellow;28   -webkit-animation-name:move;//调用move动画29   -webkit-animation-duration:10s;//move动画从0%到100%的用时,单位为s30   -webkit-animation-timing-function:ease;//表示动画播放方式 ease(速度由快到慢)linear(恒定速度)ease-in(加速变化31 32 ) ease-out(减速变化) ease-in-out(先加速在减速)33   -webkit-animation-direction:normal;//表示动画播放方向  normal(默认从0%到100%) alternate(偶数次从0%到100%,基数34 35 次100%到0%)36   -webkit-animation-delay:2s;//动画延时2秒播放37   -webkit-animation-iteration-count:infinite;//动画播放的次数  infinite表示无限次38   -webkit-animation-play-state:running;//播放还是paused39   -webkit-animation-fill-mode:none;//定义动画开始之前和结束之后发生的操作 none(动画结束时返回第一帧) forwards(动40 41 画结束后显示最后一帧) backwards(元素应用动画样式时迅速应用动画的第一帧) both(元素动画同时具有forwards和42 43 backwards效果)44   45 }

人气教程排行