动画 animation

animation: name duration timing-function delay iteration-count direction;

name: 动画名称(使用@keyframe定义的动画名称)

duration: 规定完成动画所花费的时间,以秒或毫秒计。

timing-function: 规定动画的运动曲线(linear:匀速运动,ease:默认属性,先慢再快再慢。ease-in:由慢到快,ease-out:由快到慢,ease-in-out:相对于匀速,(开始和结束都慢)两头慢)。

delay: 动画开始之前的延迟。

iteration-count:动画播放的次数。(infinite无限轮播)

direction:规定是否应该轮流反向播放动画。

例:

@-webkit-keyframes mycolor { 

 0% { background-color:red;}       

 40% {            background-color:darkblue;}      

  70% {            background-color:yellow;}        

100% {            background-color:red;}   

    }

    #animate_1:hover{        -webkit-animation: mycolor 5s linear infinite

    }

你可能感兴趣的:(动画 animation)