CSS（六）CSS动画-animation简介

水深无声 2023-06-08 10:47 26阅读 0赞

这是一个系列的文章，你也可以查看其他文章：

0、[CSS-预热篇][CSS-]

1、[CSS（一）详解position][CSS_position]

2、[CSS（二）transform][CSS_transform]

3、[CSS（三）flex布局（flex弹性布局详解）][CSS_flex_flex]

4、[CSS（四）详解Grid布局][CSS_Grid]

5、[CSS（五）CSS动画-transition简介][CSS_CSS_-transition]

6、[CSS（六）CSS动画-animation简介][CSS_CSS_-animation]

7、[CSS（七）两栏布局详解][CSS]

一、概念

CSS Animation需要指定动画一个周期重复的次数、是否轮流反向播放动画，以及动画效果的名称，其他和transation类似。

二、语法

animation 属性是一个简写属性，用于设置六个动画属性：

*  animation-name（规定需要绑定到选择器的 keyframe 名称。）
 *  animation-duration（规定完成动画所花费的时间，以秒或毫秒计。）
 *  animation-timing-function（规定动画的速度曲线。）
 *  animation-delay（规定在动画开始之前的延迟。）
 *  animation-iteration-count（规定动画应该播放的次数。）
 *  animation-direction（规定是否应该轮流反向播放动画。）

语法：

<single-animation>#
    where 
    <single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
    
    where 
    <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
    <single-animation-iteration-count> = infinite | <number>
    <single-animation-direction> = normal | reverse | alternate | alternate-reverse
    <single-animation-fill-mode> = none | forwards | backwards | both
    <single-animation-play-state> = running | paused
    <keyframes-name> = <custom-ident> | <string>
    
    where 
    <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
    <step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
    
    where 
    <step-position> = jump-start | jump-end | jump-none | jump-both | start | end

三、基本用法举例（W3C示例稍有改动）：

<!DOCTYPE html>
    <html>
    
    <head>
        <style>
            div {
                width: 100px;
                height: 100px;
                background: greenyellow;
                position: relative;
                animation: mycub 5s infinite;
                -webkit-animation: mycub 5s infinite;
                /*Safari and Chrome*/
            }
    
            @keyframes mycub {
                from {
                    top: 0px;
                }
    
                to {
                    top: 200px;
                }
            }
    
            @-webkit-keyframes mycub
    
            /*Safari and Chrome*/
                {
                from {
                    top: 0px;
                }
    
                to {
                    top: 200px;
                }
            }
        </style>
    </head>
    
    <body>
    
        <p><strong>注释：</strong>Internet Explorer 9-不支持 animation 属性。</p>
    
        <div></div>
    
    </body>
    
    </html>

四、兼容性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70][]

五、参考资料

1、腾讯云《[CSS3动画animation][CSS3_animation]》

2、阮一峰《[CSS动画简介][CSS 1]》

3、w3cschool《[animation属性][animation]》

4、MDN《[animation][animation 1]》

5、CSS3 Working Draft 《[animation][animation 2]》

[CSS-]: https://blog.csdn.net/u014744118/article/details/98873684
[CSS_position]: https://blog.csdn.net/u014744118/article/details/97300870
[CSS_transform]: https://blog.csdn.net/u014744118/article/details/98037338
[CSS_flex_flex]: https://blog.csdn.net/u014744118/article/details/99199806
[CSS_Grid]: https://blog.csdn.net/u014744118/article/details/99658494
[CSS_CSS_-transition]: https://blog.csdn.net/u014744118/article/details/102616568
[CSS_CSS_-animation]: https://blog.csdn.net/u014744118/article/details/102617125
[CSS]: https://blog.csdn.net/u014744118/article/details/103848497
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70]: /images/20230531/e0c7e49c4fd64fdf93474144b683b5e6.png
[CSS3_animation]: https://cloud.tencent.com/developer/article/1197750
[CSS 1]: http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
[animation]: https://www.w3school.com.cn/cssref/pr_animation.asp
[animation 1]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
[animation 2]: https://www.w3.org/TR/2018/WD-web-animations-1-20181011/