animation初体验

最新推荐文章于 2021-05-14 23:33:50 发布

天空影

最新推荐文章于 2021-05-14 23:33:50 发布

阅读量2.9w

点赞数

分类专栏：大前端-html/css 文章标签： css3 动画

本文链接：https://blog.csdn.net/jx950915/article/details/78801109

版权

大前端-html/css 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

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

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

前提

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

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