css学习笔记-动画

来源：互联网发布：鹰朗el01正品淘宝店编辑：程序博客网时间：2024/04/24 03:21

开始前还是推荐下：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

阅读全文

0 0