css动画

最新推荐文章于 2024-09-04 17:17:13 发布

tztz1yzyz2

最新推荐文章于 2024-09-04 17:17:13 发布

阅读量158

点赞数

分类专栏： css 文章标签： css 动画

本文链接：https://blog.csdn.net/tztz1yzyz2/article/details/78318651

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
   @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，
   就能创建由当前样式逐渐改为新样式的动画效果。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
  1.规定动画的名称
  2.规定动画的时长

动画是使元素从一种样式逐渐变化为另一种样式的效果。
  您可以改变任意多的样式任意多的次数。
  请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
  0% 是动画的开始，100% 是动画的完成。
  为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

例如：

<style>
        @keyframes change{
            10%{
                background-color: red;
            }
            50%{
                background-color: green;
            }
            100%{
                background-color: yellow;
            }
        }
        #animation{
            width: 100px;
            height: 100px;
            background-color:orange;
            /*使用动画必填的两个属性：1.动画名称  2.动画持续时间*/
            /*（1.动画名称）*/
            animation-name: change;
            /*（2.动画持续时间）*/
            animation-duration: 10s;
            /*3.速度曲线速度*/
            animation-timing-function: linear;
            /**/
            animation-iteration-count: 3;
            /*5.动画在下一次播放的顺序 取值可以是normal默认 也何以是alternate逆向播放*/
            animation-direction: alternate;
            /*6.动画完成的执行显示状态*/
            /*   1.forwards动画完成后的最后一个状态2.backwards动画回到最初的显示状态*/
            animation-fill-mode: forwards;
            /*7.开始的时间*/
            animation-delay: 2s;
        }

    </style>
    <title></title>
</head>
<body>
<div id="animation"></div>
</body>
</html>