蓁祎家进步中

# 动画

⬅️⬅️UI

# 10css

返回顶部

# Animista

# Animate CSS

# Vivify

http://vivify.mkcreative.cz/

# Magic Animations CSS3

https://www.minimamente.com/project/magic/

# cssanimation.io

http://cssanimation.io/index.html

# Angrytools

https://angrytools.com/css/animation/

# Hover

http://ianlunn.github.io/Hover

# WickedCSS

http://kristofferandreasen.github.io/wickedCSS/#

# Three Dots

# cssShake

https://github.com/elrumordelaluz/csshake

# 彻底掌握 css 动画 transition(过渡)

返回顶部

值 描述
transition-duration transition 效果需要指定多少秒或毫秒才能完成
transition-property 指定 CSS 属性的 name，transition 效果
transition-timing-function 指定 transition 效果的转速曲线
transition-delay 定义 transition 效果开始的时候

transition 翻译成中文是过渡的意思，顾名思义，它就是专门做过渡动画的，比如一些放大缩小，隐藏显示等

transition 属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# duration

back

transition 效果需要指定多少秒或毫秒才能完成

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f40;
  transition-duration: 1s;
}
div:hover {
  height: 150px;
  width: 150px;
}
1
2
3
4
5
6
7
8
9
10
11

这是 transition 最基本的用法，transition-duration 为动画执行所需的时间，这段代码的意思就是鼠标移入，div 的宽高就会都变成 150px

# property

back

指定 CSS 属性的 name，transition 效果

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f40;
  transition-duration: 1s;
  transition-property: width;
}
div:hover {
  height: 150px;
  width: 150px;
}
1
2
3
4
5
6
7
8
9
10
11
12

这里 transition-property 值仅为 width，意思是只给 width 加动画，所以会呈现这种效果，同样如果换成了 height，那么将会是变高才有动画。
我们发现，第一个案例我们并没有写 transition-property，但是案例中 width 和 height 属性是同时变化的，那是因为 transition-property 的默认值为 all，只要不写这个属性，那就是全部变化都会执行动画。

# function

back

指定 transition 效果的转速曲线

div {
  width: 100px;
  height: 50px;
  background: #f40;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
div:hover {
  width: 250px;
}
1
2
3
4
5
6
7
8
9
10

TIP

transition-timing-function 的作用就是改变动画在每一帧的快慢。这里 transition-timing-function 仅展示值为ease-in-out的动画效果，可以理解为慢-快-慢。其他的不做展示，可以参考下表进行理解。

值 描述 速度
linear（默认属性） 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)） 匀速
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)） 快-慢-慢
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)） 快-快
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)） 慢-慢
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)） 慢-快-慢
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值 自定义

# delay

back

定义 transition 效果开始的时候

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f40;
  transition-duration: 1s;
  transition-delay: 1s;
}
div:hover {
  height: 150px;
  width: 150px;
}
1
2
3
4
5
6
7
8
9
10
11
12

这里 transition-delay 的值为 1s，意思是动画将在延迟一秒后执行。

# 彻底掌握 css 动画 transition 总结

back

这里给出属性值在 transition 中的简写方式。

transition: property duration timing-function delay;
1
div {
  transition: all 1s ease-in-out 2s;
}
1
2
3

# 彻底掌握css动画animation

返回顶部

值 描述
@keyframes 定义一个动画,@keyframes 定义的动画名称用来被 animation-name 所使用
animation-name 检索或设置对象所应用的动画名称 ,必须与规则@keyframes 配合使用，因为动画名称由@keyframes 定义
animation-duration 检索或设置对象动画的持续时间
animation-timing-function 检索或设置对象动画的过渡类型
animation-delay 检索或设置对象动画的延迟时间
animation-iteration-count 检索或设置对象动画的循环次数
animation-direction 检索或设置对象动画在循环中是否反向运动
animation-play-state 检索或设置对象动画的状态
animation-fill-mode 指定动画填充模式。默认是 none
送给大家一个如意金箍棒

# @keyframes

back

定义一个动画,@keyframes定义的动画名称用来被animation-name所使用

div {
  width: 50px;
  height: 50px;
  background: #f40;
  border-radius: 50%;
  animation: mymove 2s;
}

@keyframes mymove {
  0% {
    width: 50px;
    height: 50px;
  }
  50% {
    width: 100px;
    height: 100px;
  }
  100% {
    width: 50px;
    height: 50px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@keyframes 主要是做关键帧动画的，每个@keyframes 后面都要跟一个名字，事例中使用了 mymove 作为帧动画的名字，然后可以在样式内对关键帧添加样式，然后根据关键帧 @keyframes 就能自动形成流畅的动画了

再比如：我们一个 div 旋转一圈，只需要定义开始和结束两帧即可：

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
1
2
3
4
5
6
7
8

准确地说，CSS 动画用百分比来刻画一个动画周期，from 其实是 0% 的别称，to 是 100% 的别称。因此关键帧 rotate 等价于：

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
1
2
3
4
5
6
7
8

# name

back

检索或设置对象所应用的动画名称 ,必须与规则@keyframes 配合使用，因为动画名称由@keyframes 定义

例子参照@keyframes

在 animation-name 使用之前，我们已经定义了一个名为 mymove 的帧动画，这里把帧动画的名字作为了 animation-name 的值，含义是当前元素将执行所设置的帧动画。

# animation-duration

back

还是参照上一个例子，仅仅有帧动画和需要执行的动画名称是不足以形成动画的，我们还需要设置一个动画执行所需要的时间，这里就用到了 animation-duration 属性，所以上一案例所展示的时间为两秒钟执行一次。

# animation-timing-function

back

检索或设置对象动画的过渡类型

div {
  width: 100px;
  height: 50px;
  background: #f40;
  position: relative;
  animation-name: mymove;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
}
@keyframes mymove {
  0% {
    left: 0px;
  }
  100% {
    left: 300px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# animation-delay

back

检索或设置对象动画的延迟时间
延迟可以为负数。负延迟表示动画仿佛开始前就已经运行过了那么长时间。

# animation-iteration-count

back

检索或设置对象动画的循环次数

默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。
属性可以指定一个或多个以逗号分隔的值 无限播放时使用 infinite

  • normal 默认值。
  • reverse 表示动画反向播放。
  • alternate 表示正向和反向交叉进行。
  • alternate-reverse 表示反向和正向交叉进行。
div {
  width: 50px;
  height: 50px;
  background: #f40;
  border-radius: 50%;
  animation-name: mymove;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes mymove {
  0% {
    width: 50px;
    height: 50px;
  }
  50% {
    width: 100px;
    height: 100px;
  }
  100% {
    width: 50px;
    height: 50px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这里 animation-iteration-count 的值为infinite，意思是动画将会无限次的执行，这也就达到了循环的效果，当然你还可以给它具体的数值，当执行你设置的次数后它会自动停止

# animation-direction

back

检索或设置对象动画在循环中是否反向运动

div {
  width: 100px;
  height: 50px;
  background: #f40;
  position: relative;
  animation-name: mymove;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes mymove {
  0% {
    left: 0px;
  }
  100% {
    left: 300px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这里 animation-direction 的值为alternate，代表动画将会来回的反复执行

值 描述
normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

# animation-play-state

back

检索或设置对象动画的状态
它可以与负延迟一起实现特殊的效果，比如进度条插件

/* 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;
1
2
3
4
5
6
7
8
9
10
11
<style>
div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
}
@keyframes mymove{
    0%   {width:50px;height:50px;}
    50%   {width:100px;height:100px;}
    100%   {width:50px;height:50px;}
}
</style>
<body>
    <button onclick="pause()">暂停</button>
    <button onclick="run()">恢复</button>
    <div></div>
</body>
function pause(){
    document.querySelector('div').style.animationPlayState="paused"
}
function run(){
    document.querySelector('div').style.animationPlayState="running"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

animation-play-state 的默认值为 running，就是动画执行的意思，在实际应用中我们经常使用 js 来操作这个属性，从而控制动画的播放和暂停。

# 彻底掌握 css 动画 animation 简写

back

animation: name duration timing-function delay iteration-count direction  play-state;

div{
    animation:mymove 2s ease-in-out 3s infinite alternate running;
}
1
2
3
4
5

# animation-fill-mode

back

  • forwards，表示，动画完成后，元素状态保持为最后一帧的状态。
  • backwards，表示，有动画延迟时，动画开始前，元素状态保持为第一帧的状态。
  • both，表示上述二者效果都有。

# 送给大家一个如意金箍棒

back

div{  margin: 200px;  height: 20px;  border: 1px solid;  animation: rotate 2.5s infinite, color 2s infinite, width 3s infinite;  animation-direction: normal, normal, alternate;}
@keyframes rotate {   100%{     transform: rotate(360deg);   } }
@keyframes color {   20%{     background-color: #f91;   }   80% {    background-color: #0ff  }}
@keyframes width {   0% {    width: 40%;  }  100% {    width: 70%;  }}
1
2
3
4

# 彻底掌握 css 动画 transform

返回顶部

transform-origin，该属性可以改变元素的原点位置

值 描述
none 定义不进行转换。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图.perspective 属性定义 3D 元素距视图的距离

transform 字面上就是变形，改变的意思。看起来他有很多属性，其实我们把常用的总结起来就是下面四个属性。

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# rotate

back

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes rotate{
    0%   {transform:rotate(0deg);}
    100%   {transform:rotate(360deg);}
}
@keyframes rotateX{
    0%   {transform:rotateX(0deg);}
    100%   {transform:rotateX(360deg);}
}
@keyframes rotateY{
    0%   {transform:rotateY(0deg);}
    100%   {transform:rotateY(360deg);}
}

.rotate{
    animation:rotate 2s infinite linear;
}
.rotateX{
    animation:rotateX 2s infinite linear;
}
.rotateY{
    animation:rotateY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="rotate">
    <img src="./y.png" alt="" class="rotateX">
    <img src="./y.png" alt="" class="rotateY">
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

这里一共有三个属性的展示 rotate，rotateX，rotateY。分别代表在平面上根据指定角度进行旋转、沿着 X 轴进行指定角度的旋转、沿着 Y 轴进行制定角度的旋转

# translate

back

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes translate{
    0%   {transform:translate(0px,0px);}
    100%   {transform:translate(100px,100px);}
}
@keyframes translateX{
    0%   {transform:translateX(0px);}
    100%   {transform:translateX(100px);}
}
@keyframes translateY{
    0%   {transform:translateY(0px);}
    100%   {transform:translateY(100px);}
}

.translate{
    animation:translate 2s infinite linear;
}
.translateX{
    animation:translateX 2s infinite linear;
}
.translateY{
    animation:translateY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="translate">
    <img src="./y.png" alt="" class="translateX">
    <img src="./y.png" alt="" class="translateY">
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

这里一共有三个属性的展示 translate(x,y)，translateX(x)，translateY(Y)。分别代表水平方向和垂直方向同时移动、仅水平方向移动、仅垂直方向移动

# scale

back

X 表示水平方向缩放的倍数 | Y 表示垂直方向的缩放倍数
Y 是一个可选参数，没有设置的话，则表示 X，Y 两个方向的缩放倍数是一样的。并以 X 为准。

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes scale{
    0%   {transform:scale(0.1,0.1);}
    100%   {transform:scale(1,1);}
}
@keyframes scaleX{
    0%   {transform:scaleX(0.1);}
    100%   {transform:scaleX(1);}
}
@keyframes scaleY{
    0%   {transform:scaleY(0.1);}
    100%   {transform:scaleY(1);}
}

.scale{
    animation:scale 2s infinite linear;
}
.scaleX{
    animation:scaleX 2s infinite linear;
}
.scaleY{
    animation:scaleY 2s infinite linear;
}

</style>
<body>
    <img src="./y.png" alt="" class="scale">
    <img src="./y.png" alt="" class="scaleX">
    <img src="./y.png" alt="" class="scaleY">
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

这里一共有三个属性的展示 scale(x,y)，scaleX(x)，scaleY(Y)。分别代表水平方向和垂直方向同时缩放、仅水平方向缩放、仅垂直方向缩放。但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为 1，如果其值大于 1 元素就放大，反之其值小于 1，元素缩小。

# skew

back

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    /* border-radius:50%; */
}
@keyframes skew{
    0%   {transform:skew(0deg,0deg);}
    100%   {transform:skew(25deg,25deg);}
}
@keyframes skewX{
    0%   {transform:skewX(0deg);}
    100%   {transform:skewX(25deg);}
}
@keyframes skewY{
    0%   {transform:skewY(0deg);}
    100%   {transform:skewY(25deg);}
}

.skew{
    animation:skew 2s infinite linear;
}
.skewX{
    animation:skewX 2s infinite linear;
}
.skewY{
    animation:skewY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="skew">
    <img src="./y.png" alt="" class="skewX">
    <img src="./y.png" alt="" class="skewY">
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

这里一共有三个属性的展示 skew(x,y)，skew(x)，skewY(Y)。分别代表水平方向和垂直方向同时扭曲、仅水平方向扭曲、仅垂直方向扭曲

# 详解 transform-origin

让你更改一个元素变形的原点

转换起点是应用转换的点。例如，rotate()函数的转换原点是旋转中心。（这个属性的应用原理是先用这个属性的赋值转换该元素，进行变形，然后再用这个属性的值把元素转换回去）

默认的转换原点是 center

/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;

/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  • 一个值：必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个。
  • 两个值：
    • 其中一个必须是<length>，<percentage>，或left, center, right关键字中的一个。
    • 另一个必须是<length>，<percentage>，或top, center, bottom关键字中的一个。
  • 三个值：
    • 前两个值和只有两个值时的用法相同。
    • 第三个值必须是<length>。它始终代表 Z 轴偏移量。

# x-offset

定义变形中心距离盒模型的左侧的<length>或<percentage>偏移值。

  • offset-keyword：left，right，top，bottom或center中之一，定义相对应的变形中心偏移。

# y-offset

定义变形中心距离盒模型的顶的<length>或<percentage>偏移值。

  • x-offset-keyword：left，right或center中之一，定义相对应的变形中心偏移。
  • y-offset-keyword：top，bottom或center中之一，定义相对应的变形中心偏移。

# z-offset

定义变形中心距离用户视线（z=0 处）的<length>（不能是<percentage>）偏移值。

# cssAni

返回顶部