【CSS】——动画属性详解以及动画案例

Array[林]

已于 2022-09-12 17:56:30 修改

阅读量404

点赞数

分类专栏：前端——CSS 文章标签： css 动画 css3

于 2022-09-12 17:56:12 首次发布

本文链接：https://blog.csdn.net/m0_50785976/article/details/126818732

版权

前端——CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

动画

动画

动画使元素逐渐从一种样式变为另一种样式，它可以随意更改任意数量的css的属性。

动画属性

@keyframes规则

规定动画模式，通过设置@keyframes规则来规定元素属性过渡到另一属性的变化过程，例如：

设置元素背景颜色从红色变为蓝色。from为元素变化前的属性，to为元素变化后的属性

@keyframes move {
  from {background-color: red;}
  to {background-color: blue;}
}

当然也可以使用百分比来控制元素过渡规则，例如：

此时的百分比指的是动画执行一次时的运行时间

@keyframes move {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: green;}
  100% {background-color: blue;}
}

animation-name

规定keyframe动画的名称，一般为@keyfeames的动画名

语法：animation-name: keyframename|none;

animation-delay

规定动画开始的延迟时间。

语法：animation-name: time;

animation-direction

规定动画是向前播放、向后播放还是交替播放。

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

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

规定动画完成一个周期的时间

语法：animation-duration: time;

animation-iteration-count

规定动画的播放次数

语法：animation-iteration-count: value|infinite;

animation-play-state

规定动画是运行还是暂停

语法：animation-play-state: paused|running;

属性值	描述
paused	指定暂停动画
running	指定正在运行的动画

animation-timing-function

规定动画的速度曲线
语法：animation-timing-function: value;

属性值	描述
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

所有动画属性都可以写到该属性中

语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

动画案例

兔子散步案例

给定一张兔子的雪碧图，如何实现该兔子的动画效果？
兔子雪碧图
首先定义一个div盒子：

<div class="box"></div>

再对盒子模型的样式进行定义，同时设置@keyframe规则去改变图片展现的位置。

.box{
        height: 232px;
        width:112px;
        background-image: url("./img/10and11/米兔练习.png");
        margin: 0 auto;
        animation: move 2s steps(4)  infinite ;
    }
    @keyframes move{
        from{
            background-position: 0 0;
        }
        to{
            background-position: -448px 0;
        }
    }

打开浏览器即可看见一只一直在原地走路的兔子。

旋转的立方体案例

通过动画实现一个旋转的立方体（3D效果）
在这里插入图片描述
html代码：

<div class="cube">
        <div class="box1">
            <img src="./img/14/奇异博士.jpg" alt="奇异博士" width="200px" height="200px">
        </div>
        <div class="box2">
            <img src="./img/14/女巫.jpg" alt="女巫" width="200px" height="200px">
        </div>
        <div class="box3">
            <img src="./img/14/浩克.jpg" alt="浩克" width="200px" height="200px">
        </div>
        <div class="box4">
            <img src="./img/14/美国队长.jpg" alt="美国队长" width="200px" height="200px">
        </div>
        <div class="box5">
            <img src="./img/14/钢铁侠.jpg" alt="钢铁侠" width="200px" height="200px">
        </div>
        <div class="box6">
            <img src="./img/14/鹰眼.jpg" alt="鹰眼" width="200px" height="200px">
        </div>
</div>

css代码：

对立方体盒子的样式进行定义，同时设置@keyframe规则去改变所有图片呈现的效果。
perspective属性定义3D元素距视图的距离,以像素计。该属性允许您改变3D元素查看3D元素的视图。当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身。 注:perspective属性只影响3D转换元素。
transform属性可用于元素的移动，旋转，缩放、倾斜的效果

.html{
        perspective: 1000px;
    }
    .cube{
        width: 200px;
        height: 200px;
        margin: 200px auto;
        transform-style: preserve-3d;
        animation: imglist 10s infinite linear;
    }
    .cube>div{
        position: absolute;
        z-index: 1;
        opacity: 0.7;
        width: 200px;
        height: 200px;
    }
    img{
        vertical-align: top;
    }
    .box1{
        transform: rotateX(90deg) translateZ(100px);
    }
    .box2{
       transform: rotateX(-90deg) translateZ(100px);
    }
    .box3{
        transform: rotatey(90deg) translateZ(100px);
    }
    .box4{
        transform: rotatey(-90deg) translateZ(100px);
    }
    
    .box5{
        transform: rotateY(0) translateZ(100px);
    }
    .box6{
        transform: rotateY(180deg) translateZ(100px);
    }

    @keyframes imglist{
        from{
        transform: rotateX(0) rotateZ(0);
        }
        to{
        transform: rotateX(1turn) rotateZ(1turn);
        }
}