提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

CSS动画-语法片

前言CSS Transition（过渡）CSS TransformCSS animationCSS box-shadowCSS 3D效果CSS Animation基本用法动画属性

---

前言

今天回顾了css动画基本属性，已经css3动画的基本属性

---

CSS Transition（过渡）

用于给动画一个过渡实现的过程，不会瞬间实现，增强视觉渲染。 css代码应用

transition：transform 1s；

我们还可以指定transition适用的属性，比如只适用于height。

transition: 1s height; transition: 1s height, 1s width;

transition的状态变化速度（又称timing function），默认不是匀速的，而是逐渐放慢，这叫做ease。

transition: 1s ease;

还包括： （1）linear：匀速

（2）ease-in：加速

（3）ease-out：减速

（4）cubic-bezier函数：自定义速度模式 注意：transition的优点在于简单易用，但是它有几个很大的局限。

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

CSS Transform

1.大小变化

transform：scale（1.2）；放大效果 transform：scale（0.8）:缩小效果

2.形状变化

1.transform-origin: 0 100%; 实验：链接: [link](https://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html). 2. transform: skewY(15deg); 对Y方向进行倾斜10度，意思是保留Y方向，将盒子沿着X方向进行倾斜。 3.transform: rotateX(-90deg) translateZ( 25px ); transform: rotate(-10deg);旋转 表示绕原点逆时针旋转10度。 4.移动：可以沿着x，y，z，方向移动。 transform: translate(0, 10px);

CSS animation

animation: rotate 1s infinite; 旋转动画过渡1s无限循环。 transform: rotateX(-90deg) translateZ( 25px );

CSS box-shadow

box-shadow: 0 0 0 5px #4d4d4d; box-shadow: 0 20px 10px -10px rgba(0, 0, 0, 0.5);

CSS 3D效果

transform-style:preserve-3d; 动画类型为3D。 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); opacity: 1;透明度

CSS Animation

基本用法

首先，CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。rainbow为动画名称。

div:hover { animation: 1s rainbow; }

上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果

动画属性

1.animation-name: 2，animation-duration:执行时间 3.animation-iteratiion-count动画执行次数 infinite 4，animation-direction: alternate;交互动画，（）mode没效果可以删掉这个属性） 5，animation-delay:1s;延迟播放 6，animation-fill-mode：forwardsl设置动画的结束。定住。 7.animation-timing-function:设置动画匀速播放 8.animation-play-state: paused暂停|running播放， 应用：

<div></div> <input type=“button” value=“paly” id=“play”>播放 </input> <input type=“button” value=“pause”id="pause">暂停</input> // js var divobj=document.querySelector("div"); document.querySelector("#play").onclick=function(){ divobj.style.animationPlaySelecte="running"; } document.querySelector("#pause").onclick=function(){ divobj.style.animationPlaySelecte="paused"; }

具体的动画@keyframes，创建动画。

@keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }

上面代码表示，rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）。如果有需要，完全可以插入更多状态。

默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。

div:hover { animation: 1s rainbow infinite; }

2.animation-fill-mode 动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。

div:hover { animation: 1s rainbow forwards; }

forwards表示让动画停留在结束状态，默认为回到动画没开始时的状态none。

3.animation-direction 动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性，可以改变这种行为。 下面看一个例子，来说明如何使用animation-direction。假定有一个动画是这样定义的。

@keyframes rainbow { 0% { background-color: yellow; } 100% { background: blue; } }

默认情况是，animation-direction等于normal。

div:hover { animation: 1s rainbow 3 normal; }

简单说，animation-direction指定了动画播放的方向，最常用的值是normal和reverse。浏览器对其他值的支持情况不佳，应该慎用。

4.animation的各项属性

div:hover { animation: 1s 1s rainbow linear 3 forwards normal; }

这是一个简写形式，可以分解成各个单独的属性。

div:hover { animation-name: rainbow; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3; } keyframes的写法 ，写法自由 @keyframes rainbow { 0% { background: #c00 } 50% { background: orange } 100% { background: yellowgreen } }

0%可以用from代表，100%可以用to代表，因此上面的代码等同于下面的形式。

@keyframes rainbow { from { background: #c00 } 50% { background: orange } to { background: yellowgreen } }

如果省略某个状态，浏览器会自动推算中间状态，所以下面都是合法的写法。

@keyframes rainbow { 50% { background: orange } to { background: yellowgreen } } @keyframes rainbow { to { background: yellowgreen } }

甚至，可以把多个状态写在一行。

@keyframes pound { from，to { transform: none; } 50% { transform: scale(1.2); } }

另外一点需要注意的是，浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡。

div:hover { animation: 1s rainbow infinite steps(10); }

6.animation-play-state 有时，动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态。 如果想让动画保持突然终止时的状态，就要使用animation-play-state属性。

div { animation: spin 1s linear infinite; animation-play-state: paused; } div:hover { animation-play-state: running; }

7.注意：浏览器前缀

目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。

div:hover { -webkit-animation: 1s rainbow; animation: 1s rainbow; } @-webkit-keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } } @keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }