CSS - 动画

介绍

这是一个实验中的功能，此功能某些浏览器尚在开发中。

CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。

动画包括两个部分：

  • 描述动画的样式规则。

  • 用于指定动画开始、结束以及中间点样式的关键帧。

CSS 动画有三个主要优点：

  • 能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。

  • 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。

  • 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

配置动画

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现。

属性 animation

用来指定一组或多组动画，每组之间用逗号相隔。

是一个简写属性，包含以下属性：

  • animation-name：初始值为none,

  • animation-duration：初始值为0s

  • animation-timing-function：初始值为ease

  • animation-delay：初始值为0s

  • animation-iteration-count：初始值为1

  • animation-direction：初始值为normal

  • animation-fill-mode：初始值为none

  • animation-play-state：初始值为running

  • animation-timeline：初始值为 auto

animation 语法 :
animation = 
  <single-animation>#  

<single-animation> = 
  <time>                              ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]         

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse  

<single-animation-fill-mode> = 
  none       |
  forwards   |
  backwards  |
  both       

<single-animation-play-state> = 
  running  |
  paused   

<keyframes-name> = 
  <custom-ident>  |
  <string>        

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                                |
  step-end                                  |
  steps( <integer> [, <step-position> ]? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}

 
 

属性 animation-name

为一系列动画命名，每个名称代表一个由@keyframes定义的动画序列。

语法：
animation-name = 
  [ none | <keyframes-name> ]#  

<keyframes-name> = 
  <custom-ident>  |
  <string>
  • none：特殊关键字，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。
语法示例：
关键字：
animation-name: none; 
单个名称：
animation-name: test_05; 
多个名称：
animation-name: test1, animation4; 

/* Global values */
animation-name: initial
animation-name: inherit
animation-name: unset

 
 

属性 animation-duration

实验中的功能，指定一个动画周期的时长。

语法：
animation-duration = 
  <time [0s,∞]>#
  • <time>：一个动画周期的时长，单位为秒 (s) 或者毫秒 (ms)，无单位值无效。
语法示例：
animation-duration: 6s
animation-duration: 10s, 30s, 230ms

 
 

属性 animation-timing-function

定义 CSS 动画在每一动画周期中执行的节奏。可能值为一或多个<timing-function> ｜ <esaing-funtion>。

语法：
animation-timing-function = 
  <easing-function>#  

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                                |
  step-end                                  |
  steps( <integer> [, <step-position> ]? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}
取值

系统预定义动画的值：

  • linear：动画从头到尾的速度是相同的。
  • ease：默认。动画以低速开始，然后加快，在结束前变慢。
  • ease-in：动画以低速开始。
  • ease-out：动画以低速结束。
  • ease-in-out：动画以低速开始和结束。

自定义动画的值：

逐帧动画的值：

分段线性函数的值：

  • linear()：大部分浏览器都不支持。 可以在点之间进行线性插值，让你能够近似地模拟更复杂的动画，比如反弹和弹性效果。
    linear()函数的一个典型用途是提供许多点来创建曲线的错觉。
    • 例如：linear(0, 0.25, 1)。这个linear()函数生成的缓动函数从0、0.25再到1线性移动。
    • 例如：linear(0,0.25 75%， 1)。这个线性缓动函数花费75%的时间从0过渡到。25，最后25%的时间从。25过渡到。1。

 
 

属性 animation-delay

实验中的功能。定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

语法：
animation-delay = 
  [ <'animation-delay-start'> <'animation-delay-end'>? | 
  <timeline-range-name> ]#
语法示例：
animation-delay: 3s;
animation-delay: 2s, 4ms;

 
 

属性 animation-iteration-count

实验中的功能。定义动画在结束前运行的次数 可以是 1 次 无限循环。

如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。

语法：
animation-iteration-count = 
  <single-animation-iteration-count>#  

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>

  • infinite：无限循环播放动画。

  • <number>：动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。

语法示例：
/* 值为关键字 */
animation-iteration-count: infinite;

/* 值为数字 */
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* 指定多个值 */
animation-iteration-count: 2, 0, infinite;

 
 

属性 animation-direction

实验中的功能。指示动画是否反向播放。

语法：
animation-direction = 
  <single-animation-direction>#  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse

  • normal：每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。

  • alternate：动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为 ease-out。计数取决于开始时是奇数迭代还是偶数迭代

  • reverse：反向运行动画，每周期结束动画由尾到头运行。

  • alternate-reverse：反向交替，反向开始交替。动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从 1 开始。

语法示例：
animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

 
 

属性 animation-fill-mode

设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

语法：
animation-fill-mode = 
  <single-animation-fill-mode>#  

<single-animation-fill-mode> = 
  none       |
  forwards   |
  backwards  |
  both

  • none：当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。

  • forwards：目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值：

animation-direction animation-iteration-count last keyframe encountered
normal even or odd 100% or to
reverse even or odd 0% or from
alternate even 0% or from
alternate odd 100% or to
alternate-reverse even 100% or to
alternate-reverse odd 0% or from
  • backwards：动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction
animation-direction first relevant keyframe
normal or alternate 0% or from
reverse or alternate-reverse 100% or to
  • both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

 
 

属性 animation-play-state

实验中的功能

定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

####### 语法：

animation-play-state =
<single-animation-play-state>#

<single-animation-play-state> =
running  |
paused

  • running：当前动画正在运行。

  • paused：当前动画已被停止。

语法示例：
/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;

 
 

属性 animation-timeline

语法：
animation-timeline = 
  <single-animation-timeline>#  

<single-animation-timeline> = 
  auto             |
  none             |
  <timeline-name>  

<timeline-name> = 
  <custom-ident>  |
  <string>

  • none：动画与时间线无关。

  • auto：动画的时间线是文档的默认文档时间线。

  • scroll()：实验性的，“匿名”时间线由当前元素的一些祖先提供。有关更多信息，请参阅 scroll()。

  • <timeline-name>：使用scroll-timeline-name属性（或scroll-timeline速记属性）声明的<custom-ident>或字符串。如果两个或多个滚动时间线共享相同的名称，则将使用级联中最后声明的。如果没有找到匹配的滚动时间线，则动画与时间线无关。

 
 

@规则 #keyframes

通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和 转换 transition相比，关键帧 keyframes 可以控制动画序列的中间步骤。

详情见CSS - At-rules - @keyframes

 
 

应用

示例1：

对比预定义动画效果，并保留动画效果，延迟1s后执行。

CSS
@keyframes animation-1 {
    from {
        margin-left: 0px;
    }
    to {
        margin-left: 460px;
    }
}
        
.dbox{
    width: 500px;
    border: 2px solid black;
    padding:0px;
}
.d{
    width: 40px;
    height: 40px;
    background-color: red;
    margin: 10px 0px;
    
    animation-name: "animation-1";
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
.d1{
    animation-timing-function: linear;
}
.d2{
    animation-timing-function: ease;
}
.d3{
    animation-timing-function: ease-in;
}
.d4{
    animation-timing-function: ease-out;
}
.d5{
    animation-timing-function: ease-in-out;
}

效果：

 

示例2：

做一些比较有意思的，类似于弹性的效果。

使用cubic-bezier()函数

@keyframes animation-1 {
    from {
        margin-left: 0px;
    }
    50%{
        margin-left: 200px;
    }
    to {
        margin-left: 400px;
    }
}
.d{
    width: 40px;
    height: 40px;
    background-color: red;
    margin: 10px 0px;
    
    animation-name: "animation-1";
    animation-duration: 4s;
    /* animation-delay: 1s; */
    animation-fill-mode: forwards;
    
}
.d1{
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* steps(4,start); */
}
.d2{
    animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);/* steps(4,jump-start); */
}
.d3{
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);/* steps(4,end); */
}

效果：

示例3:

使用steps()函数

@keyframes animation-1 {
    from {
        margin-left: 0px;
    }
    to {
        margin-left: 260px;
    }
}
        
.dbox{
    width: 300px;
    border: 2px solid black;
    padding:0px;
}
.d{
    width: 40px;
    height: 40px;
    background-color: red;
    margin: 10px 0px;
    
    animation-name: "animation-1";
    animation-duration: 4s;
    /* animation-delay: 1s; */
    animation-fill-mode: forwards;
    
}
.d1{
    animation-timing-function: steps(3,start);
}
.d2{
    animation-timing-function: steps(3,jump-start);
}
.d3{
    animation-timing-function: steps(3,end);
}
.d4{
    animation-timing-function: steps(3,jump-end);
}
.d5{
    animation-timing-function: steps(3,jump-both);
}
.d6{
    animation-timing-function: steps(3,jump-none);
}

效果：

 
 

事件与动画

示例：

CSS:
@keyframes slidein1 {
    from {
        margin-left:50%;
    }
    to {
        margin-left:0%;
    }
}
@keyframes slidein2 {
    from {
        margin-left:50%;
    }
    to {
        margin-left:0%;
    }
}

.slidein1 {
    animation: slidein1 1s alternate 3;
}
.slidein2 {
    animation: slidein2 1s alternate 3;
}

HTML:
<h1 id="watchme">Watch me move</h1>
<p>This example shows how to use CSS animations to make <code>h1</code> elements
move across the page.</p>
<p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
<ul id="output">
</ul>

JS:
<script>
    var e = document.getElementById("watchme");
    e.addEventListener("animationstart", listener, false);
    e.addEventListener("animationend", listener, false);
    e.addEventListener("animationiteration", listener, false);
    
    function startAnimation(){
        if(e.className === "slidein1"){
            e.className = "slidein2";
        }else{
            e.className = "slidein1";
        }
    }
    
    function pauseAnimation(){
        e.style.animationPlayState = "paused";
    }
    
    function continueAnimation(){
        e.style.animationPlayState = "running";
    }
    function listener(e) {
      var l = document.createElement("li");
      switch(e.type) {
        case "animationstart":
          l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
          break;
        case "animationend":
          l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
          e
          break;
        case "animationiteration":
          l.innerHTML = "New loop started at time " + e.elapsedTime;
          break;
      }
      document.getElementById("output").appendChild(l);
    }
    
</script>

效果：

代码解析：

  • 让动画开始，直接设置类名即可。
  • 让动画重复，则必须同构更改类名，才可以实现，网上也有通过延迟方法setTimeout()实现方法，可以试试。

 
 

事件 AnimationEvent

实验中的功能，AnimationEvent 接口表示提供与动画相关的信息的事件。

属性继承其父级Event：

详情参考 AnimationEvent

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • CSS 动画
    css 动画可以产生多种效果，先简单介绍下 animation 的使用。 animation 属性 animati...
    shadow123阅读 317评论 0赞 0
  • 「CSS」动画
    transitiontransition-property 过渡属性transition-duration 过渡持...
    Rella7阅读 471评论 0赞 0
  • css 动画的3种方式
    1. css 动画的三种方式    1. transition 过渡   2. transform 变形   3....
    黑木令阅读 2,307评论 0赞 1
  • CSS动画
    一、CSS变形 1.什么是CSS变形 CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果 每个效果都可以称...
    笑该动人d阅读 281评论 0赞 0
  • web前端入门到实战：彻底掌握css动画【animation】
    马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？ 说起来css动画是一个很尬的事，一方面因为公司用c...
    大前端世界阅读 799评论 0赞 3

友情链接更多精彩内容