css 动画功能 -尊龙游戏旗舰厅官网

【css3中的动画功能】

/* 1.transition功能，通过指定开始结束状态来过度，无法实现复杂动画。*/ /* transition:property duration timing-function */ transition-property: background-color; transition-duration: 3s; transition-timing-function: linear;transition: background-color 3s linear; /*简洁的写法*/transition: background-color 1s linear,color 1s linear,width 1s linear; /* 同时执行多个动画效果 *//* 2.animations功能，可以指定帧，实现复杂的动画。 */ @-webkit-keyframes mycolor {0% /*开始帧*/{background-color:red;}40% /*背景颜色变化帧 - 黄色*/{background-color:#ffff00;}70% /*背景颜色变化帧 - 蓝色*/{background-color:aqua;}100% /*结束帧*/{background-color:red;} } div:hover {-webkit-animation:mycolor 5s linear; }/* 实现多个属性值同时改变的动画 */ @-webkit-keyframes mycolor {0%{background-color:red;transform:rotate(0deg);}30%{background-color:aqua;transform:rotate(30deg);}60%{background-color:lightskyblue;transform:rotate(-30deg);}100%{background-color:red;transform:rotate(0deg);} } div:hover {-webkit-animation-name:mycolor;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear; }/*参数含义*//* linear:匀速 ease-in:又慢到快 ease-out:由快到慢 ease:先慢再快再慢 ease-in-out:先慢再快再慢*/ view code

 

转载于:https://www.cnblogs.com/crayonchen/p/4929942.html

总结

以上是尊龙游戏旗舰厅官网为你收集整理的css 动画功能的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。