animation属性之纯css3实现曲线运动——贝塞尔曲线(cubic-bezier)
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
(关键帧名称,持续时间,速度曲线,延迟时间,动画次数,是否反向,完成状态,运行|暂停)
- animation-name 关键帧名称
@keyframes name { }
(1)关键帧的声明只有两种：(from/to)和(%)
(2)0 (%)从0%开始至100%，0%～100%中间任意数字都可以 - animation-duration 动画持续时间（默认为0，值可以设置成秒[s]或毫秒[ms]）
- animation-timing-function 动画速度曲线（默认值ease）
- animation-delay 动画播放延迟时间设置（s/ms）
- animation-iteration-count 动画播放次数,默认值1，值：n/infinite）
- animation-direction 规定是否应该轮流反向播放动画。
animation-direction: normal|alternate;
normal:默认值。动画应该正常播放。
alternate:动画应该轮流反向播放。动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。 - animation-fill-mode: backwards/forwards; 动画播放完之后的状态（默认值none，值:none;backwards;forwards;both.）
(1)backwards应用在第一个关键帧的状态,即定格在0%时候的样子
(2) forwards动画完成保持最后一帧的状态,即定格在最后100%的样子
animation-play-state:running|paused; //运行|暂停（默认运行）
注意：始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
<html>
<head>
<meta charset="UTF-8">
<title>贝塞尔曲线动画调研title>
<style>
html {
background: #ad4e24;
}
/* //定义球的初始值，位置是绝对定位； */
.ball {
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
bottom: 40px;
z-index: 10;
left: 40px;
background: greenyellow;
}
/* //定义动画的流程 */
.run_top_right {
display: block;
animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 cubic-bezier(.66, .1, 1, .41);
/* animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 ease-out; */
animation-fill-mode: forwards;
}
/* //向上走的动画初始及结尾值 */
@keyframes run-right-top {
0% {
bottom: 40px;
}
100% {
bottom: 500px;
}
}
/* //向上右的动画初始及结尾值 */
@keyframes run-right-right {
0% {
left: 40px;
}
100% {
left: 600px;
}
}
style>
head>
<body>
<div class="ball run_top_right">div>
body>
html>
第一、分解运动
上图的曲线运动进行分解
向右：匀速运动；
向上：加速运动；（因为向上的线越来越陡，意味着速度越来越快，所以在做加速运动）
第二、实现代码解释
——@keyframes 是css3的一个规则，用来定义一个运动的每个桢的位置，大小颜色等；
——这段代码的意思是动画animation用run-right-right动画和 run-right-top动画，注意我们是同时引用的两个动画；
就是@keyframes 所定义的，然后我们又设置了一些参数，逐一解释：
一.第一个参数就是引用的动画名字；
二，动画持续时间3s；
三、0.4s是延迟时间为0.4s，以run_top_right加到ball上面的时间为准，延后0.4s;
四、1是动画的执行次数是1次；
五、cubic-bezier(.66,.1,1,.41) 就是重要的贝塞尔曲线(cubic-bezier)；
实际上是设置animation-timing-function的属性；就是设置运动速度的特性属性；
1.linear，就是线性运动，也就是匀速运动；
2 ease，默认。动画以低速开始，然后加快，在结束前变慢。
3.ease-in，ease-out,ease-in-out,就很好记，ease就是慢的意思，ease-in就是慢速开始，就是做加速运动，ease-out就是减速运动，ease-in-out就是先加速后减速；当然我们也可以设置成cubic-bezier()值；
因为这里我只需要向上的运动做变速运动所以run-right-right 我设置的是linear，匀速运动，然后 run-right-top设置的是cubic-bezier(.66,.1,1,.41)，这样的加速运动，这样得到的运动路径就是一条曲线！！曲线的轨迹又run-right-top的cubic-bezier值决定！
animation-fill-mode: forwards;
animation-fill-mode设置动画完成后的状态；
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。简单说就是定格在最后100%的样子；
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。就是定格在0%时候的样子
css3圆形轨迹动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> css3圆形轨迹动画 </title>
<style type="text/css">
@keyframes animX{
0% {left: 0px;}
100% {left: 500px;}
}
@keyframes animY{
0% {top: 0px;}
100% {top: 500px;}
}
#ball {
width: 20px;
height: 20px;
background-color: #f66;
border-radius: 50%;
position: absolute;
animation: animX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
}
#lopp {
width: 500px;
height: 500px;
border: 2px solid #999;
border-radius: 50%;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="lopp"></div>
<div id="ball"></div>
</body>
</html>
