CSS transition animation的使用（内含贝赛尔曲线详解）(3)

买辣椒也用券 2019-10-16 22:52 来源: 互联网

二、animation（动画效果）

因为animation动画是一段持续且循环的动画效果，所以不像transition过渡动画那样简洁，可能会涉及到很复杂的动画效果，所以我们要先学习一下@keyframes规则
该规则是用来创建动画的，说直白点就是告诉元素按哪种动画效果执行

@keyframes语法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

值

描述

animationname

必需。定义动画的名称。

keyframes-selector

必需。动画时长的百分比。

合法的值：

0-100%
from（与 0% 相同）
to（与 100% 相同）

css-styles

必需。一个或多个合法的 CSS 样式属性。

案例

<!DOCTYPE html>
<html>
<head>
<style> 
div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -moz-animation:mymove 5s infinite; /* Firefox */
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome */
    -o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
@-moz-keyframes mymove /* Firefox */{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
@-o-keyframes mymove /* Opera */{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>

效果如下：