css动画

来源：互联网发布：nginx图片不能访问编辑：程序博客网时间：2024/06/05 14:20

如需在 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>

阅读全文

0 0