首页 > Web开发 > 详细

CSS 动画功能

时间:2015-11-02 15:11:07      阅读:377      评论:0      收藏:0      [点我收藏+]

【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

 

CSS 动画功能

原文:http://www.cnblogs.com/crayonchen/p/4929942.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!