css学习笔记-动画

原创于 2017-06-21 14:21:41 发布 · 296 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css

前端开发专栏收录该内容

12 篇文章

订阅专栏

开始前还是推荐下：http://www.w3school.com.cn/cssref/index.asp#animation

内容去W3school看，讲的很详细。附上一段笔者的测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画测试</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: rebeccapurple;
            -webkit-animation:mymove 5s infinite;
            -o-animation:mymove 5s infinite;
            animation:mymove 5s infinite;
            position: relative;
            animation-play-state:running;
        }
        div:hover{
            animation-play-state:paused;
        }

        @keyframes mymove
        {
            0%   {top:0px; left:0px; background:red;}
            25%  {top:0px; left:100px; background:blue;}
            50%  {top:100px; left:100px; background:yellow;}
            75%  {top:100px; left:0px; background:green;}
            100% {top:0px; left:0px; background:red;}
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

值得一说的是，

1.如果没有写position:relative动画是不会播放的。

2.0%相当于from,100%相当于to