首页 > 程序开发 > web前端 > HTML/CSS >

css3动画效果

2017-01-17

css3动画效果。通过类似flash动画中关键帧声明一个动画。

一、animation实现动画效果主要由两部分组成:

1、通过类似flash动画中关键帧声明一个动画

2、在animation属性中调用关键帧声明的动画

\
二、主要步骤

1、关键帧属性 @keyframes 声明一个关键帧属性的动画

例如,在css中书写以下代码

@keyframes myani{
        0%{
            background-color:white;
        margin-left:0px;
    }
    50%{
            background-color:black;
        margin-left:100px;
    }
    100%{
            background-color:white;
        margin-left:0px;
    }
}

上面的示例效果还可以合并,用逗号隔开,如下所示:

eg. @keyframes myani{
        0%,100%{
            background-color:white;
        margin-left:0px;
    }
    50%{
            background-color:black;
        margin-left:100px;
    }
}

0%指的是动画起始的位置;100%指的是动画结束的位置

创建关键帧动画,还可以使用关键字

eg. @keyframes myani{
        from{
            background-color:white;
        margin-left:0px;
    }
    to{
            background-color:black;
        margin-left:100px;
    }
}

2、创建animation-name 目的:调用关键帧动画

属性值有两个:

none 默认值,没有指定任何动画

INDEX 是由 @keyframes指定创建的动画名称

eg. div{
        animation-name:myani;
}

3、animation-duration 设置动画播放的时间

eg. div{
        animation-name:myani;
    animation-duration:1s;
}

4、animation-timing-function 设置缓动

属性值请参考transition-timing-function的属性值

5、animation-delay 设置延迟时间

eg. div{
        animation-name:myani;
    animation-duration:1s;
    animation-delay:1s;
}

6、animation-iteration-count 设置循环次数

属性值有两个,如下所示:

次数 默认值为1

infinite 表示无限次循环

eg. div{
        animation-name:myani;
    animation-duration:1s;
    animation-delay:1s;
    animation-iteration-count:infinite;
}

7、animation-direction 设置播放动画的方向进行交替

属性值有两个,如下所示:

normal 默认值,每次正序播放

alternate 一次正序播放、一次逆序播放,如此循环

解析:假如动画播放是由快到慢,若设置normal,便一直是由快到慢;若设置alternate,则会先

由快到慢,然后再由慢到快,如此循环。

8、animation-play-state 设置动画停止/开始播放

属性值如下所示:

paused 规定动画已停止

running 规定动画正在播放

eg. div{
        animation-name:myani;
    animation-duration:1s;
    animation-delay:1s;
    animation-play-state:paused;     动画不进行播放
}

9、animation-fill-mode 设置动画在播放之前或之后,其动画效果是否可见

该属性可设置多个属性值,由逗号分隔,属性值如下所示:

none 默认值,表示按照预期进行和结束

forwards 动画结束后继续应用最后关键帧的位置,既不返回

backforwards 动画结束后迅速应用起始关键帧位置,即返回

both 根据情况产生forwards或backforwards的效果

//这个both属性和动画执行的次数有关,即于animation-iteration-count有关,动画停在

哪就是哪(开头或结尾)

10、animation简写形式

eg. div{
        animation:myani 1s ease 2 alternate 0s both;
}

animation子属性的顺序为:animation-name、animation-duration、animation-timing-function、

animation-iteration-count、animation-direction、animation-delay、animation-fill-mode

注意:animation的使用需要浏览器的版本较高,使用的话,需要在标准格式前面加上带前缀的格式。

相关文章
最新文章
热点推荐