CSS3动画-CFANZ编程社区

文章目录

动画概述
动画的基本规则
动画的基本使用
利用动画序列完成多个状态的实现
CSS3动画常见属性
动画简写属性
有关速度曲线

动画概述

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡(过渡可以说是一种简单的动画)，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本规则

制作动画分为两步：

先定义动画
在使用(调用)动画

首先定义动画，我们使用keyframes(类似定义类选择器)

keyframes译为关键帧，所以也叫关键帧动画

语法结构：

@keyframes {
 0%{
  width:100px;
 } 
 100%{
  width:200px;
 }
}

这里的0%和100%有专门的名字 – 动画序列

动画序列

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。你可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%

接下来是元素使用动画，在使用的时候有两个属性是必不可少的：

语法结构：

div {
  width: 200px;
  height: 200px;
  background-color: aqua;
  margin: 100px auto;
  /* 调用动画 */
  animation-name: 动画名称;
  /* 持续时间 */
  animation-duration: 持续时间;  /* 记得带单位 */
 }

动画的基本使用

现在我们来做一个小案例：一打开网页，一个红色的盒子就从左边飞到右边。

代码实现如下：

<style>div {
        width: 200px;
        height: 200px;
        background-color: red;
        animation-name: move;
        animation-duration: 2s;
    }

    /* @keyframes move {
        0% {
            transform: translateX(0px);
        }
        100% {
            transform: translateX(1000px);
        }
    } */

    @keyframes {
        from {
            transform: translateX(0px);
        }
        to {
            transform: translateX(1000px);
        }
    }

    /* 这两种写法都可以 */</style>
<body>
    <div></div>
</body>

利用动画序列完成多个状态的实现

我们现在有一个新需求，还是刚才那个盒子，但是我们想让他围着浏览器窗口走一圈，这我们怎么去实现呢？

原理图：

CSS3动画_代码实现_02

代码实现：

<style>div {
        width: 200px;
        height: 200px;
        background-color: red;
        animation-name: move;
        animation-duration: 5s;
    }

    @keyframes {
        0% {
            transform: translate(0px,0px);
        }
        25% {
            transform: translate(1000px,0px);
        }
        50% {
            transform: translate(1000px,500px);
        }
        75% {
            transform: translate(0px,500px);
        }
        100% {
            transform: translate(0px,0px);
        }
    }</style>
<body>
    <div></div>
</body>

CSS3动画常见属性

CSS3动画_动画_04

动画简写属性

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态

animation: myfirst 5s linear 2s infinite alternate;

简写属性里面不包含 animation-play-state
暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来：animation-direction ： alternate
盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

有关速度曲线

animation-timing-function：规定动画的速度曲线，默认是“ease”

CSS3动画_css_05

其中这个steps()不同于上面五种，它不是一种连续平滑的效果，而是一种状态的切换(类似于断点)

效果代码：

<style>div {
        overflow: hidden;
        font-size: 20px;
        width: 0;
        height: 30px;
        background-color: pink;
        /* 让我们的文字强制一行内显示 */
        white-space: nowrap;
        /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
        animation: w 4s steps(10) forwards;
    }
    
    @keyframes {
        0% {
            width: 0;
        }
        100% {
            width: 200px;
        }
    }</style>
<body>
    <div>CSDN我在这里等你</div>
</body>