[游戏开发]针对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、对应参数可选值

timing-function

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

direction

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

fill-mode

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

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 属性以保证动画轨迹能完全生效。

同时其实可以无限叠加两种模式的组合，这样就会出现很多轨迹，谨记，动画是同时生效的，在一个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;
}