animation属性之纯css3实现曲线运动——贝塞尔曲线(cubic-bezier)

本文主要是介绍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，就不会播放动画了。

<!DOCTYPE html>
<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>