针对CSS Animation的综合笔记

CSS animation

主要针对 CSS animation 的常用涉及内容进行整理。
参考网站 ,通常会兼容其他浏览器。

一、语法搭配

1、格式内容

1、@keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name 
animation: 3s ease-in 1s 2 reverse both paused slidein;

2、@keyframes duration | timing-function | delay | name 
animation: 3s linear 1s slidein;

3、@keyframes duration | name 

2、对应参数可选值

参数名称	描述
duration	（几乎是必选）整个动画过程的时间长度。
timing-function	描述整个动画过程的帧之间的动作。
delay	延迟时间，默认为0s，如果为负数，则第一秒则到其绝对值的秒数立即开始。
iteration-count	循环的次数，infinite 关键字为无限次。
direction	动画播放的顺序及其效果预览。
fill-mode	填充效果，动画执行前后的渲染时机
play-state	object.style.animationPlayState=“paused” ，主要用于查询状态，
name	也就是对应@keyframes的别名

timing-function

描述整个动画过程的帧之间的动作。

属性值	属性描述
ease	先缓慢开始，然后快速开始，然后缓慢结束。 cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in	先缓慢开始，后面稍微加速然后保持匀速到结束。cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out	先保持匀速，在尾段开始减速然后保持到结束。cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out	开始和结尾都是慢速，中间部分会稍微加速后匀速。cubic-bezier(0.42, 0, 0.58, 1.0)
linear	全程保持匀速cubic-bezier(0.0, 0.0, 1.0, 1.0)
steps	steps(n, )，其中n为步骤数，参考timging about steps
cubic-bezier	cubic-bezier(p1, p2, p3, p4)，cubic-bezier 曲线，其中p1,p3必须要0到1内的值。

direction

动画播放的顺序及其效果预览，整体上属于大于1次后见到效果。

属性值	属性描述
nomal	默认值，每个循环结束后从头开始。
alternate	动画交替反向运行，整体受timing-function影响。
reverse	与原动画反向运行。
alternate-reverse	单纯依次反向运行。

fill-mode

执行之前和之后如何将样式应用于其目标

属性值	属性描述
none	未执行时将不会渲染内容
forwards	动画将在应用于目标时立即应用第一个关键帧中定义的值，不包含delay，到最后一个关键帧截止才渲染最后一个关键帧的内容。
backwards	动画将在应用于目标时立即应用第一个关键帧中定义的值，delay期间也是。
both	在forwards和backwards之间额度范围内都进行渲染

play-state

document.getElementById(“myDIV”).style.animationPlayState = “paused”;

二、整体步骤

step1：定义一个dom元素，赋予一个可见内容和一个定位属性。
step2：定义一个@keyframes，用于描绘整个动画的起始位置和效果

0、完整内容

<div class="content">
   <div class="animal"></div>
</div>

/* 赋予dom一个动画，语法 @keyframes duration | name */
.animal {
   animation: 3s  rightSlash;
}


@keyframes rightSlash {
   /* 这部分为从左到右一个斜线"\"  */
   0% {
       margin-left: 0%;
   }

   100% {
       margin-left: 100%;
   }

   from {
       top: 10px;
   }

   to {
       top: 200px;
   }
}

/* 基础样式 */
.animal {
   background-color: #1766aa;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   position: relative;
}

1、 定义一个@keyframes （必然）

定义动画的开始到结束的 轨迹 的一个关键配置，所有animation后续引用的name也是指引到这个内容别名上整体上。

主要两种模式 ：百分比(Percentage) 和 起终点(animation duration)，取值都是0 ~ 100%,值得注意的是，建议在动画元素上增加 position 属性以保证动画轨迹能完全生效。

模式名称	描述（除了百分比，还可以增加其他效果）
Percentage	从0% 轨迹到100%（并不是一定要求要到100%，大于0%即可）
animation duration	From 0% to 100%（并不是一定要求要到100%，大于0%即可）

同时其实可以无限叠加两种模式的组合，这样就会出现很多轨迹，谨记，动画是同时生效的，在一个keyframes中。

@keyframes rightSlash {
    /* 这部分为从左到右一个斜线"\"  */
    0% {
        margin-left: 0%;
    }

    100% {
        margin-left: 100%;
    }

    from {
        top: 10px;
    }

    to {
        top: 200px;
    }
}

2、赋予元素内容一个动画内容。

赋予dom一个动画，语法 @keyframes duration | name

.animal {
    animation: 3s  rightSlash;
}