CSS3动画（过渡动画和关键帧动画）

路人贾！

已于 2023-09-06 10:48:30 修改

阅读量318

点赞数 1

文章标签： css3 css 前端

于 2022-12-30 21:00:07 首次发布

本文链接：https://blog.csdn.net/m0_71125105/article/details/128498291

版权

transition（过渡）的属性语法

transition属性可以对元素进行移动、缩放、转动、拉长或拉伸。

简写

transition:过渡属性名称 过渡时间 过渡动画速度曲线 过渡动画开始前的延迟时间;

例：

transition: all 2s ease-in-out .5s;

拆分写

transition-property:all;//过渡属性名称
transition-duration:2s;//过渡时间
transition-timing-function:ease-in-ou;//过渡动画速度曲线
transition-delay:.5s;//过渡动画开始前的延迟时间

transition-property描述

所有数值属性都可以参与过度，比如width,height,left,top,border-radius,all( 所有属性都将获得过渡效果)

transition-timing-function的值及描述

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

cubic-bezie()介绍

cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)，cubic-bezier（x1,y1,x2,y2)。
贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。
P0：默认值 (0, 0)
P1：动态取值 (x1, y1)
P2：动态取值 (x2, y2)
P3：默认值 (1, 1)
我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。
最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。
在这里插入图片描述

transform（变形）的属性语法

transform属性可以对元素进行移动、缩放、转动、拉长或拉伸。
transform属性有四个常用方法：，translate(x,y,z)移动（平移）,rotate(x,y,z)旋转，scale(x,y,z)缩放,skew(x-angle,y-angle)倾斜

简写

transform: translate(x,y,z),rotate(x,y,z) scale(x,y,z) skew(x-angle,y-angle,z-angle)；

拆分写

transform: translate(x,y,z);    translateX()    translateY()
transform:rotate(x,y,z) ;
transform: scale(x,y,z) ;
transform:skew(x-angle,y-angle,z-angle);

animation（执行动画）的属性语法

简写

animation: 动画名称(关键帧的名称) 动画前等待时间动画一个周期的时间动画速度变化方式执行次数结束时的状态动画的方向;
例：

animation: mcAnimation 1s 1s linear 3 forwards normal;

拆分写

animation-name: mcAnimation ; //执行动画名称
animation-delay: 1s; //动画前等待时间
animation-duration: 1s; //动画一个周期的时间
animation-timing-function: linear; //动画速度变化方式
animation-iteration-count: 3; //执行次数 	infinite无限循环(infinite和alternate必须一起用，没有infinite的话alternate的作用体现不出来)
animation-fill-mode:forwards; //结束时的状态
animation-direction: normal; //动画的方向
animation-play-state:paused; //暂停动画		running运行动画

animation-timing-function的值及描述

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps(int,start,end)	指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下start：表示直接开始。end：默认值，表示戛然而止。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-fill-mode 的值及详解

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

animation-direction 的值及详解

值	描述
normal	默认值。动画按正常播放。
alternate	动画反向播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse	动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

CSS3 @keyframes （关键帧动画）规则

@keyframes 通过在动画序列中定义关键帧的样式，来控制CSS动画序列中的步骤。
使用 @keyframes 可以创建动画,在动画过程中，可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字“from”和“to”，等价于0％到100％，0％是开头动画，100％是当动画完成。
@keyframes 动画名称(关键帧的名称){ }

@keyframes mycolor {
	from {top:0px;}
	to {top:200px;}
}

 @keyframes mycolor {
    0% { background-color: red; }
    30% { background-color: darkblue; }
    50% { background-color: yellow; }
    70% { background-color: darkblue; }
    100% { background-color: red; }
  }

@keyframes 与animation一块使用

例1：

@keyframes mycolor {
	0% { background-color: red; }
	30% { background-color: yellow; }
	60% { background-color: green; }
	100% { background-color: red; }
}
div:hover {
	animation-name: mycolor;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-iteration-count: 2;
}

例2：

@keyframes rotate0 {
    from {
        transform: rotate(0turn) translate(1.2rem, 1rem) rotate(1turn)
    }

    to {
        transform: rotate(1turn) translate(1.2rem, 1rem) rotate(0turn)
    }
}

div:hover {
    animation: rotate0 10s infinite linear;
}

动画效果

多圆同轨迹环绕圆运动1

<head>
    <meta charset="UTF-8">
    <title>沿圆形轨迹运动</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            height: 100%;
        }
        /* 定义轨道属性 */
        #trajectory {
            width: 300px;
            height: 300px;
            border: 4px solid #949494;
            border-radius: 50%;
            position: relative;
            left: calc(50% - 153px);
            top: calc(50% - 153px);
        }
       
        /* 定义所有球的起始位置和属性 */
        #move1,
        #move2,
        #move3,
        #move4,
        #move5,
        #move6,
        #move7{
            left: -22px;
            top: -22px;
            width: 40px;
            height: 40px;
            font-size: 12px;
            background-color: #32c33a;
            border-radius: 50%;
            position: absolute;
        }
         /* 定义动画 */
        @keyframes move1X {
            0% {
                left: -22px;
            }
            100% {
                left: 282px;
            }
        }
        
        @keyframes move1Y {
            0% {
                top: -22px;
            }
            100% {
                top: 282px;
            }
        }
        /* 设置动画运动属性 */
        /* animation:动画名称  动画时长   速度曲线   延迟时间   重复次数  动画方向  执行完毕时状态; */
        #move1 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
        }
        
        #move2 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -2.4s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) -0.4s infinite alternate;
        }
        #move3 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -2.8s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) -0.8s infinite alternate;
        }
        #move4 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -3.2s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) -1.2s infinite alternate;
        }
        #move5 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -3.6s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) -1.6s infinite alternate;
        }
        #move6 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
        }
        #move7 {
            animation: move1X 4s cubic-bezier(0.36, 0, 0.64, 1) -4.4s infinite alternate, move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) -2.4s infinite alternate;
        }
        
    </style>
</head>
 
<body>
    <div id="trajectory">
        <div id="move1">Immortal brother1</div>
        <div id="move2">Immortal brother2</div>
        <div id="move3">Immortal brother3</div>
        <div id="move4">Immortal brother4</div>
        <div id="move5">Immortal brother5</div>
        <div id="move6">Immortal brother6</div>
        <div id="move6">Immortal brother6</div>
    </div>
</body>

多圆同轨迹环绕圆运动2

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>纯css3动画实现轨道旋转效果</title>
    <style>
        @keyframes rotate1 {
            from {
                transform: rotate(0turn) translate(0, -150px) rotate(1turn)
            }

            to {
                transform: rotate(1turn) translate(0, -150px) rotate(0turn)
            }
        }

        @keyframes rotate2 {
            from {
                transform: rotate(0turn) translate(150px, 0) rotate(1turn)
            }

            to {
                transform: rotate(1turn) translate(150px, 0) rotate(0turn)
            }
        }

        .outer-circle {
            display: inline-block;
            width: 300px;
            height: 300px;
            margin: 50px auto;
            text-align: center;
            border-radius: 100%;
            background: palegoldenrod;
            position: relative;
        }

        .circle1 {
            width: 50px;
            height: 50px;
            line-height: 50px;
            background: cadetblue;
            border-radius: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
            animation: rotate1 5s infinite linear;
            /* transform: translate(0,-150px); */
        }

        .circle2 {
            width: 40px;
            height: 40px;
            line-height: 40px;
            background: yellowgreen;
            border-radius: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -20px;
            margin-top: -20px;
            animation: rotate2 3s infinite linear;
        }
    </style>
</head>

<body>
    <div class="outer-circle">
        <div class="circle1">Hello</div>
        <div class="circle2">Hello2</div>
    </div>
</body>

</html>

css3小球环形转圈效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }

        .warpbox {
            width: 600px;
            height: 600px;
            background: #f0f0f0;
            position: relative;
        }

        .centerdian {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            -webkit-animation: circle 10s infinite linear;
        }

        .box {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            background: yellow;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -20px;
            margin-top: -20px;


        }

        .box1 {
            transform: rotateZ(30deg) translateY(-100px);
            /* -webkit-animation: circle1 3s infinite linear; */

        }

        .box2 {
            transform: rotateZ(60deg) translateY(-100px);
            /* -webkit-animation: circle2 3s infinite linear; */
        }

        .box3 {
            transform: rotateZ(90deg) translateY(-100px);
            /* -webkit-animation: circle3 3s infinite linear; */
        }

        .box4 {
            transform: rotateZ(120deg) translateY(-100px);
            /* -webkit-animation: circle5 3s infinite linear; */
        }

        .box5 {
            transform: rotateZ(150deg) translateY(-100px);
            /* -webkit-animation: circle5 3s infinite linear; */
        }


        .box6 {
            transform: rotateZ(180deg) translateY(-100px);
        }

        .box7 {
            transform: rotateZ(210deg) translateY(-100px);
        }

        .box8 {
            transform: rotateZ(240deg) translateY(-100px);
        }

        .box9 {
            transform: rotateZ(270deg) translateY(-100px);
        }

        .box10 {
            transform: rotateZ(300deg) translateY(-100px);
        }

        .box11 {
            transform: rotateZ(330deg) translateY(-100px);
        }

        .box12 {
            transform: rotateZ(360deg) translateY(-100px);
        }
    </style>

</head>
<body>
    <div class="warpbox">
        <div class="centerdian">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>

            <div class="box box6">1</div>
            <div class="box box7">2</div>
            <div class="box box8">3</div>
            <div class="box box9">4</div>
            <div class="box box10">5</div>

            <div class="box box11">4</div>
            <div class="box box12">5</div>


        </div>
    </div>
</body>

</html>