animation初体验

来源：互联网发布：淘宝c店怎么装修编辑：程序博客网时间：2024/05/29 13:54

其实写了这么多项目，自己还没真正的接触到css3中的动画，刚好借着今天有时间就简单的了解一下这个animation属性，也为以后写动画做好准备。

要想了解animation就得先知道@keyframes。
@keyframes规则是创建动画。 @keyframes规则内指定一个css样式和动画将逐步从目前的样式更改为新的样式。

前提

学习animation的前提是知道他的一些属性以及属性所代表的含义：

属性描述CSS@keyframes规定动画。3animation所有动画属性的简写属性，除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3animation-timing-function规定动画的速度曲线。默认是 “ease”。3animation-delay规定动画何时开始。默认是 0。3animation-iteration-count规定动画被播放的次数。默认是 1。3animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。3animation-play-state规定动画是否正在运行或暂停。默认是 “running”。3

实例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>nimation简单研究</title>    <style>        .box{            width:100px;            height:100px;            background:gray;            margin:50px;            position:relative;            animation:myfirst 5s infinite linear alternate;        }        @keyframes myfirst        {        0%   {left:0px;}        100% {left:200px;}        }    </style></head><body>    <div class="box">    </div></body></html>

简单实例

还要做什么复杂的动画的话可以自己琢磨了！（溜了溜了）

阅读全文

0 0