CSS动画

过渡动画

  • 允许 CSS 的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画改变css的属性值

  • CSS3 过渡语法：

    • transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
    • [ transition-property ]： 检索或设置对象中的参与过渡的属性
      • all | none | property,property ...
      • all： 所有可以进行过渡的css属性
      • none： 不指定过渡的css属性
      • property： 指定要进行过渡的css属性
    • [ transition-duration ]： 检索或设置对象过渡的持续时间
    • [ transition-timing-function ]： 检索或设置对象中过渡的动画类型
      • transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)
      • 检索或设置对象中过渡的动画类型
      • 如果提供多个属性值，以逗号进行分隔
      • http://cubic-bezier.com/（贝塞尔曲线生成器）
    • [ transition-delay ]： 检索或设置对象延迟过渡的时间

  • 练习

  • 注意事项:

    并不是所有元素都支持过渡

    元素没有渲染完的情况下，过渡不生效

关键帧动画

关键帧

  • CSS3 动画语法－关键帧：

    @keyframes name{

  [keyframes-selector] { Properties:Properties value; }

  [keyframes-selector] { Properties:Properties value; }

 }
    • keyframes 控制关键位置，并不是所有的位置
    • keyframes-selector：必写项，动画持续时间的百分比
    • 0% - 100%之间， 或者使用from和to关键字也可以设置，from代表0%，to代表100%

  • 案例

    @keyframes move{
    0% { margin-left: 100px; background: green; }
    40% { margin-left: 150px; background: orange; }
    60% { margin-left: 75px; background: blue; }
    100% { margin-left: 100px; background: red; }
}

关键帧的使用

  • 基础语法：

    • animation-name:move; /动画属性名，前面keyframes样例定义的动画名/

    • animation-duration: 10s; /动画持续时间/

    • animation-timing-function: ease-in-out; /动画帧频，和transition-timing-function是一样的//animation-timing-function:检测的是关键帧的区间，并不是整个动画过程/ease | linear | ease-in | ease-out | cubic-Bezier (n1 , n2, n3, n4)

    • animation-delay: 2s; /动画延迟时间/

    • animation-iteration-count: 10; /动画循环次数，infinite为无限次/

    • animation-direction: normal; /定义动画播放方式/

      默认normal，动画正常播放； alternate，动画轮流反向播放

    • 合写：animation:[<animation-name> || <animation-duration> ||<animation-timing-function> || <animation-delay> ||<animation-iteration-count> || <animation-direction>]

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键帧动画</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #009ff2;
            /*animation: jello 1s infinite;*/

            /*!*关键帧名称*!
            animation-name: move2;

            !*关键帧动画执行总时间，百分比是平分了总时间*!
            animation-duration: 1s;

            !*动画执行类型，在每一个帧节点之间进行动画类型*!
            animation-timing-function: linear;

            !*整个动画的延迟时间*!
            animation-delay: 500ms;

            !*动画执行的次数，可以是数字  可以是infinite*!
            animation-iteration-count: infinite;

            !*动画播放方式：可以选择动画轮流反向播放*!
            animation-direction: alternate;*/

            /*合写：按照刚才书写的顺序 依次书写即可  不用的可以省略*/
            animation:move2 3s linear .5s infinite alternate;



        }

        @keyframes  move{
            0%{
                /*background-color: black;*/
            }
            50%{
                /*变形在检测0%的时候没有这个属性，50%出现了，就会在0%到50%之间过渡*/
                transform: rotateX(30deg);
                background-color: green;
            }
            100%{
                background-color: pink;
            }
        }
        @keyframes move2 {
            0%{
                margin-left: 0px;
                background-color: pink;
            }
            25%{
                margin:0 0 0 1000px;
                transform: scale(1.3);
            }
            50%{
                margin: 400px 0 0 1000px;
            }
            100%{
                margin: 400px 0 0 0;
            }
            /*百分百不写就是默认*/

        }

        @keyframes swing {
            20% {
                -webkit-transform: rotate3d(0, 0, 1, 15deg);
                transform: rotate3d(0, 0, 1, 15deg);
            }

            40% {
                -webkit-transform: rotate3d(0, 0, 1, -10deg);
                transform: rotate3d(0, 0, 1, -10deg);
            }

            60% {
                -webkit-transform: rotate3d(0, 0, 1, 5deg);
                transform: rotate3d(0, 0, 1, 5deg);
            }

            80% {
                -webkit-transform: rotate3d(0, 0, 1, -5deg);
                transform: rotate3d(0, 0, 1, -5deg);
            }

            to {
                -webkit-transform: rotate3d(0, 0, 1, 0deg);
                transform: rotate3d(0, 0, 1, 0deg);
            }
        }

        @-webkit-keyframes jello {
            from,
            11.1%,
            to {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }

            22.2% {
                -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
                transform: skewX(-12.5deg) skewY(-12.5deg);
            }

            33.3% {
                -webkit-transform: skewX(6.25deg) skewY(6.25deg);
                transform: skewX(6.25deg) skewY(6.25deg);
            }

            44.4% {
                -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
                transform: skewX(-3.125deg) skewY(-3.125deg);
            }

            55.5% {
                -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
                transform: skewX(1.5625deg) skewY(1.5625deg);
            }

            66.6% {
                -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
                transform: skewX(-0.78125deg) skewY(-0.78125deg);
            }

            77.7% {
                -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
                transform: skewX(0.390625deg) skewY(0.390625deg);
            }

            88.8% {
                -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
                transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
            }
        }
    </style>
</head>
<body>
<!--
    @keyframes用来定义关键帧
    关键帧的起点是0%（from）  结束点是100%（to）

    当from和to不是默认样式的话，动画开始后会直接跳到0%的样式，动画结束后，会跳到动画默认样式

    如果百分之0和百分之百不写，那么默认效果就是百分之0和百分百


-->
    <div class="box"></div>
</body>
</html>
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡动画触发条件</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }


        .box:hover{
            animation: change 1s linear 4;
        }

        @keyframes change {
            from{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            to{
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        }
    </style>
</head>
<body>
    <button id="btn">变！！！</button>
    <div class="box"></div>
    <script>
        var oBox = document.querySelector(".box");
        var oBtn = document.querySelector("#btn");

        oBtn.onclick = function () {
            oBox.style.animation="change 1s linear 4"
        }


    </script>
</body>
</html>
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡动画触发条件</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;

            transition: all 1s;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .box:hover{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button id="btn">变！！！</button>
    <div class="box"></div>
    <script>
        var oBox = document.querySelector(".box");
        var oBtn = document.querySelector("#btn");

        // 第一种，添加行内样式覆盖原有样式
        oBtn.onclick = function () {
            oBox.style.backgroundColor = "pink";
            oBox.style.width = "200px";
            oBox.style.height = "200px";
        }

        //第二种，改变类名来改变样式
        oBtn.onclick = function () {
            oBox.classList.add("box2");
        }
    </script>
</body>
</html>

  • 动画的暂停和播放

    animation-play-state 属性

    • paused：规定动画已暂停
    • running：规定动画正在播放
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键帧动画的暂停和开始</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #009ff2;
            animation: change 3s infinite;
            animation-play-state: paused;
        }
        /*animation-play-state 控制动画的播放于暂停*/
       /* running：播放
        paused：暂停*/

        .box:hover{
            animation-play-state: running;
        }
        @keyframes change{
            from{
                width: 300px;
                height: 300px;
                background-color: #9b55ff;
            }
            to{
                width: 400px;
                height: 400px;
                background-color: pink;
            }
        }
    </style>
</head>
<body>
<!--
    动画起始和结束状态：

-->
    <div class="box"></div>
</body>
</html>

  • 动画开始和结束状态

    animation-fill-mode 属性

    • none：使用得动画不会对动画等待和动画完成的元素样式产生改变
    • forwards：告诉浏览器动画结束后，元素的样式将设置为动画的最后一帧的样式
    • backwards ：那么在动画等待的那段时间内，元素的样式将设置为动画第一帧的样式
    • both：在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画起始和结束状态</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #009ff2;

            /*动画开始之前，保持默认值
            动画开始之后，直接跳到第一帧的动画帧
            动画结束之后，直接跳到默认值*/

            /*animation-fill-mode属性控制动画起始和结束状态*/
            /*forwards:执行完最后一帧后，样式停留在最后一帧上*/
            /*backwards：无论是动画刚刚开始，还是开始前，动画始终停留在第一帧上*/
            /*both：动画开始和结束后，分别在第一帧和最后一帧保持*/

            animation: change 2s 1s;
            animation-fill-mode:forwards;
            animation-fill-mode:backwards;
            animation-fill-mode:both;
            animation-fill-mode:none;
        }
        @keyframes change{
            from{
                width: 300px;
                height: 300px;
                background-color: #9b55ff;
            }
            to{
                width: 400px;
                height: 400px;
                background-color: pink;
            }
        }
    </style>
</head>
<body>
<!--
    动画起始和结束状态：

-->
    <div class="box"></div>
</body>
</html>

  • 逐帧动画

    steps() 是 Animation 中的一个 timing-function 函数，

    能够实现动画的阶跃式变化，而非两个状态间的线性过渡

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兔斯基动画</title>
    <style>
        .box{
            width: 48px;
            height: 48px;
            background: url("../images/tusiji.png") 0 0 no-repeat;

            /*逐帧动画  的动画类型是steps（） 里边书写步数*/
            animation: tusiji 12.5s steps(12) infinite;
        }
        @keyframes tusiji {
            from{
                background-position-x: 0;
            }
            to{
                background-position-x: -576px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳动的心</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: url("../images/heart-sprite.png") 0 0 no-repeat;

            /*animation: heart 1s steps(29) infinite;*/
            /*animation-fill-mode:forwards;*/

        }
        @keyframes heart {
            from{
                background-position-x: 0;
            }
            to{
                background-position-x: -2900px;
            }
        }
    </style>
</head>
<body>
    <!--

    -->
<div class="box">

</div>
    <script>
        var oBox = document.querySelector(".box");
        oBox.onclick=function () {
            oBox.style.animation="heart 1s steps(29)";
            // oBox.style.animationFillMode="forwards";
        }
    </script>
</body>
</html>
posted @ 2023-01-10 22:40  z_bky  阅读(38)  评论(0)    收藏  举报