CSS3动画详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Dora_5537/article/details/98994910

1. 动画属性：transition、animation(CSS3新增)。

2. animation 可以通过 @keyframes (关键帧) 构建一些 transition 的动画效果。

3. CSS3 一共有八个子属性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode。

CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease" (由快到慢)。还有 ease-in (越来越快) \| ease-in-out (先快后慢) \| ease-out (越来越慢) \| linear (恒速) \| cubic-bezier (贝塞尔曲线：由四个值来确定)。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。无限次播放是 "infinite"。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。逆向播放是 "alternate"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。暂停是 "paused"。	3
animation-fill-mode	规定动画的时间外属性。默认是”none“，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处。当为forwards时，当动画结束后继续应用最后关键帧的位置。当为backwards时，会在向元素应用动画样式时迅速应用动画的初始帧。当为both时，元素动画同时具有forwards和backwards的效果。	3

CSS3的动画实例

动画实例的效果图：https://www.w3cschool.cn/tryrun/showhtml/trycss3_animation5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>W3Cschool教程(w3cschool.cn)</title>
    <style> 
        div
        {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            animation:myfirst 5s linear 2s infinite alternate;
            /* Firefox: */
            -moz-animation:myfirst 5s linear 2s infinite alternate;
            /* Safari and Chrome: */
            -webkit-animation:myfirst 5s linear 2s infinite alternate;
            /* Opera: */
            -o-animation:myfirst 5s linear 2s infinite alternate;
        }

        @keyframes myfirst
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
            /* 可以使用 from / to 来代替 0% / 100% */    
        }


        /* Firefox */
        /* @-moz-keyframes myfirst */
        /* Safari and Chrome */
        /* @-webkit-keyframes myfirst  */
        /* Opera */ 
        /* @-o-keyframes myfirst  */
    </style>
</head>

<body>
    <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
    <div></div>
</body>

</html>

参考：https://www.w3cschool.cn/css3/rvwu5flo.html

END