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