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

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

  • animation: name duration timing-function delay iteration-count direction fill-mode play-state;(关键帧名称,持续时间,速度曲线,延迟时间,动画次数,是否反向,完成状态,运行|暂停)
    • 第一、分解运动
    • 第二、实现代码解释
    • 实际上是设置animation-timing-function的属性;就是设置运动速度的特性属性;
    • 因为这里我只需要向上的运动做变速运动所以run-right-right 我设置的是linear,匀速运动,然后 run-right-top设置的是cubic-bezier(.66,.1,1,.41),这样的加速运动,这样得到的运动路径就是一条曲线!!曲线的轨迹又run-right-top的cubic-bezier值决定!
  • css3圆形轨迹动画

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属性之纯css3实现曲线运动——贝塞尔曲线(cubic-bezier)_第1张图片

  • 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>

效果图
animation属性之纯css3实现曲线运动——贝塞尔曲线(cubic-bezier)_第2张图片

你可能感兴趣的:(css3,动画,前端)