css笔记 - Chain Node Guide

以下的代码回导致父元素高度塌陷

<div class="father">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

.father{
    width: 100%;
    border: 1px solid #ff9900;
}

.child{ 
    width: 100px;
    height: 100px;
    background: pink;
    float: left;
}

1.额外标签法

<div class="father">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="clear"></div>
</div>

.clear{
    clear: both;
}

2.父元素添加overflow:hidden

.father{
    width: 100%;
    border: 1px solid #ff9900;
    overflow:hidden;
}

3.伪元素法

<div class="father clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

.clearfix:after{
    content: "";
    display:block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix{
    *zoom:1; //兼容IE6、7
}

4.双伪元素法

<div class="father clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

.clearfix:before,.clearfix:after{
    content: "";
    display:table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom:1;
}

CSS权重

CSS	格式	权重
通配符选择器	*	0000
后代选择器	li a	0000
子选择器	ul>li	0000
相邻兄弟选择器	h1+p	0000
标签选择器	div	0001
伪元素选择器	li:after	0001
伪类选择器	li:last-child	0010
属性选择器	a[ref=“eee”]	0010
类选择器	.classname]	0010
ID	#id	0100
内联样式	style=””	1000
!important	xx!important	无限大

!important声明的样式的优先级最高；如果优先级相同，则最后出现的样式生效；继承得到的样式的优先级最低；通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

伪类选择器

伪类	描述
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接（鼠标按下未弹起的链接）

==注意事项：== 为了确保生效，请按照L-V-H-A的顺序声明：link-visited-hover-active 记忆法：love – h ate

其他 input:focus 选取获取焦点的表单元素

常用样式

多行文本溢出显示省略

.row_2_ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; //超过N行溢出显示省略号
  -webkit-box-orient: vertical;
}

自定义滚动条

.scroll_container {
  overflow: auto;
}

.scroll_container::-webkit-scrollbar {
  width: 8px;
  background: white;
}

.scroll_container::-webkit-scrollbar-corner,
/* 滚动条角落 */
.scroll_container::-webkit-scrollbar-thumb,
.scroll_container::-webkit-scrollbar-track {
  border-radius: 4px;
}

.scroll_container::-webkit-scrollbar-corner,
.scroll_container::-webkit-scrollbar-track {
  /* 滚动条轨道 */
  background-color: rgba(180, 160, 120, 0.1);
  box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
}

.scroll_container::-webkit-scrollbar-thumb {
  /* 滚动条手柄 */
  background-color: rgba(0, 0, 0, .4);
}

记得添加上高度限制

生成小于12px文字

<svg width="195.625" height="11.52">
  <text
    dominant-baseline="baseline"
    font-size="10"
    y="9.52"
    style="line-height: 1; vertical-align: middle;"
  >
    千山鸟飞绝 - from hill to hill no bird in flight
  </text>
</svg>

提示：使用 svg 作为解决小于 12px 字号文字的方案：

使用 transform: scale() 设置后占位区域并没有改变，难以调节对齐方式。
使用 canvas 无法选中文字（也可以解决，但不如 svg 简洁）

三角形

<div class="triangle"></div>

等边

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 65px 112.6px 65px;
  border-color: transparent transparent #00adb5 transparent;
}

等腰

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 65px 100px 65px;
  border-color: transparent transparent #00adb5 transparent;
}

波浪案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      background: #2189f6;
    }

    .content {
      height: 65vh;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .waves {
      position: relative;
      width: 100%;
      height: 15vh;
      margin-bottom: -7px;
      /* 修复 Safari 等浏览器下方空隙 */
      min-height: 100px;
      max-height: 150px;
    }

    .parallax>use {
      animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    }

    .parallax>use:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 7s;
    }

    .parallax>use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
    }

    .parallax>use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
    }

    .parallax>use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
    }

    @keyframes move-forever {
      0% {
        transform: translate3d(-90px, 0, 0);
      }

      100% {
        transform: translate3d(85px, 0, 0);
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="content">
    </div>

    <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
      <defs>
        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
      </defs>
      <g class="parallax">
        <use xlink:href="#gentle-wave" x="28" y="0" fill="rgba(255,255,255,0.7" />
        <use xlink:href="#gentle-wave" x="28" y="3" fill="rgba(255,255,255,0.5)" />
        <use xlink:href="#gentle-wave" x="28" y="5" fill="rgba(255,255,255,0.3)" />
        <use xlink:href="#gentle-wave" x="28" y="7" fill="#fff" />
      </g>
    </svg>
  </div>
  </script>
</body>

</html>

CSS动画

先在页面中写一个元素

<div id="block" class="move_1 show"></div>

注意：move_1为动画的名称，需要什么动画效果，此处就写上对应名称即可

加一段css样式

.show {
  -webkit-transition: opacity .2s;
  background: #48b1ff;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -40px 0 0 -40px;
  opacity: 0;
}

然后在js加一段触发动画的事件

<script>
  setTimeout(() => {
    let block = document.getElementById("block");
    block.style.opacity = 1
  })
</script>

平移

从上进入


.move_1{
    -webkit-animation:move_1 1s;
}
@-webkit-keyframes move_1{
    0%{ -webkit-transform:translateY(-200px); opacity:0;}
}

从右进入


.move_2{
    -webkit-animation:move_2 1s;
}
@-webkit-keyframes move_2{
    0%{ -webkit-transform:translateX(200px); opacity:0;}
}

从下进入


.move_3{
    -webkit-animation:move_3 1s;
}
@-webkit-keyframes move_3{
    0%{ -webkit-transform:translateY(200px); opacity:0;}
}

从左进入


.move_4{
    -webkit-animation:move_4 1s;
}
@-webkit-keyframes move_4{
    0%{ -webkit-transform:translateX(-200px); opacity:0;}
}

缩放

从小到大


.zoom_1{
    -webkit-animation:zoom_1 1s;
}
@-webkit-keyframes zoom_1{
    0%{ -webkit-transform:scale(0); opacity:0;}
}

从大到小


.zoom_2{
    -webkit-animation:zoom_2 1s;
}
@-webkit-keyframes zoom_2{
    0%{ -webkit-transform:scale(2); opacity:0;}
}

X轴缩放


.zoom_3{
    -webkit-animation:zoom_3 1s;
}
@-webkit-keyframes zoom_3{
    0%{ -webkit-transform:scaleX(0); opacity:0;}
}

Y轴缩放


.zoom_4{
    -webkit-animation:zoom_4 1s;
}
@-webkit-keyframes zoom_4{
    0%{ -webkit-transform:scaleY(0); opacity:0;}
}

旋转

中心旋转


.rotate_1{
    -webkit-animation:rotate_1 1s;
}
@-webkit-keyframes rotate_1 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(360deg);
  }
}

左上角旋转


.rotate_2{
    -webkit-animation:rotate_2 1s;
    -webkit-transform-origin:0% 0%;
}
@-webkit-keyframes rotate_2 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg);
  }
}

右上角旋转


.rotate_3{
    -webkit-animation:rotate_3 1s;
    -webkit-transform-origin:100% 0%;
}
@-webkit-keyframes rotate_3 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-180deg);
  }
}

右下角旋转


.rotate_4{
    -webkit-animation:rotate_4 1s;
    -webkit-transform-origin:100% 100%;
}
@-webkit-keyframes rotate_4 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-180deg);
  }
}

左下角旋转


.rotate_5{
    -webkit-animation:rotate_5 1s;
    -webkit-transform-origin:0% 100%;
}
@-webkit-keyframes rotate_5 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg);
  }
}

旋转中心外移


.rotate_6{
    -webkit-animation:rotate_6 1s;
    -webkit-transform-origin:-100% -100%;
}
@-webkit-keyframes rotate_6 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg);
  }
}

缩放 & 平移

从上震撼登场


.zoom_move_1{
    -webkit-animation:zoom_move_1 1s;
}
@-webkit-keyframes zoom_move_1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(-1000px);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(60px);
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
  }
}

从右震撼登场


.zoom_move_2{
    -webkit-animation:zoom_move_2 1s;
}
@-webkit-keyframes zoom_move_2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(1000px);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateX(-10px);
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
  }
}

从下震撼登场


.zoom_move_3{
    -webkit-animation:zoom_move_3 1s;
}
@-webkit-keyframes zoom_move_3 {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(1000px);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(-60px);
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
  }
}

从左震撼登场


.zoom_move_4{
    -webkit-animation:zoom_move_4 1s;
}
@-webkit-keyframes zoom_move_4 {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(-1000px);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateX(10px);
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
  }
}

先缩放后平移


.zoom_move_5{
    -webkit-animation:zoom_move_5 1s;
}
@-webkit-keyframes zoom_move_5 {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(-1000px);
  }
}

**先平移后缩放 **


.zoom_move_6{
    -webkit-animation:zoom_move_6 1s;
}
@-webkit-keyframes zoom_move_6 {
  0% {
    opacity: 0;
    -webkit-transform:  translateX(-400px) scale(0);
  }
}

旋转 & 缩放

旋转放大


.rotate_zoom_1{
    -webkit-animation:rotate_zoom_1 1s;
}
@-webkit-keyframes rotate_zoom_1 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg) scale(0);
  }
}

旋转缩小


.rotate_zoom_2{
    -webkit-animation:rotate_zoom_2 1s;
}
@-webkit-keyframes rotate_zoom_2 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg) scale(2);
  }
}

中心点偏移放大


.rotate_zoom_3{
    -webkit-animation:rotate_zoom_3 1s;
    -webkit-transform-origin:30% 30%;
}
@-webkit-keyframes rotate_zoom_3 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0);
  }
}

中心点偏移缩小


.rotate_zoom_4{
    -webkit-animation:rotate_zoom_4 1s;
    -webkit-transform-origin:30% 30%;
}
@-webkit-keyframes rotate_zoom_4 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(2);
  }
}

旋转 & 平移

先平移后旋转


.rotate_move_1{
    -webkit-animation:rotate_move_1 1s;
}
@-webkit-keyframes rotate_move_1 {
  0% {
    opacity: 0;
    -webkit-transform:translateX(280px) rotate(480deg);
  }
}

先旋转后平移


.rotate_move_2{
    -webkit-animation:rotate_move_2 1s;
}
@-webkit-keyframes rotate_move_2 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(120deg) translateX(-400px);
  }
}

扇形进入


.rotate_move_3{
    -webkit-animation:rotate_move_3 1s;
}
@-webkit-keyframes rotate_move_3 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(30deg) translateX(240px);
  }
}

螺旋丸


.rotate_move_4{
    -webkit-animation:rotate_move_4 1s;
}
@-webkit-keyframes rotate_move_4 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(960deg) translateX(300px);
  }
}

斜切 & 平移

弹性 & 平移


.skew_move_1{
    -webkit-animation:skew_move_1 1s;
    -webkit-transform-origin:0% 100%;
}
@-webkit-keyframes skew_move_1 {
  0% {
    opacity: 0;
    -webkit-transform:translateX(260px) skewX(-24deg);
  }
}

弹性 & 平移

从上弹性进入


.bounce_move_1{
    -webkit-animation:bounce_move_1 .8s ease-out;
}
@-webkit-keyframes bounce_move_1 {
  0% {
    opacity: 0;
    -webkit-transform:translateY(-440px);
  }
  40%{
      opacity:1;
      -webkit-transform:translateY(0);
  }
  50%{
      -webkit-transform:translateY(-10px);
  }
  60%{
      -webkit-transform:translateY(0);
  }
  70%{
       -webkit-transform:translateY(-2px);
  }
  80%,100%{
      -webkit-transform:translateY(0);
  }
}

从右弹性进入


.bounce_move_2{
    -webkit-animation:bounce_move_2 .8s ease-out;
}
@-webkit-keyframes bounce_move_2 {
  0% {
    opacity: 0;
    -webkit-transform:translateX(440px);
  }
  40%{
      opacity:1;
      -webkit-transform:translateX(0);
  }
  50%{
      -webkit-transform:translateX(10px);
  }
  60%{
      -webkit-transform:translateX(0);
  }
  70%{
       -webkit-transform:translateX(2px);
  }
  80%,100%{
      -webkit-transform:translateX(0);
  }
}

从下弹性进入


.bounce_move_3{
    -webkit-animation:bounce_move_3 .8s ease-out;
}
@-webkit-keyframes bounce_move_3 {
  0% {
    opacity: 0;
    -webkit-transform:translateY(440px);
  }
  40%{
      opacity:1;
      -webkit-transform:translateY(0);
  }
  50%{
      -webkit-transform:translateY(10px);
  }
  60%{
      -webkit-transform:translateY(0);
  }
  70%{
       -webkit-transform:translateY(2px);
  }
  80%,100%{
      -webkit-transform:translateY(0);
  }
}

从左弹性进入


.bounce_move_4{
    -webkit-animation:bounce_move_4 .8s ease-out;
}
@-webkit-keyframes bounce_move_4 {
  0% {
    opacity: 0;
    -webkit-transform:translateX(-440px);
  }
  40%{
      opacity:1;
      -webkit-transform:translateX(0);
  }
  50%{
      -webkit-transform:translateX(-10px);
  }
  60%{
      -webkit-transform:translateX(0);
  }
  70%{
       -webkit-transform:translateX(-2px);
  }
  80%,100%{
      -webkit-transform:translateX(0);
  }
}

弹性 & 缩放

弹性放大


.bounce_scale_1{
    -webkit-animation:bounce_scale_1 .8s ease-out;
}
@-webkit-keyframes bounce_scale_1 {
  0% {
    opacity: 0;
    -webkit-transform:scale(0);
  }
  25%{
      opacity:1;
      -webkit-transform:scale(1);
  }
  40%{
      -webkit-transform:scale(0.9);
  }
  55%{
      -webkit-transform:scale(1);
  }
  70%{
       -webkit-transform:scale(0.98);
  }
  85%,100%{
      -webkit-transform:scale(1);
  }
}

弹性缩小


.bounce_scale_2{
    -webkit-animation:bounce_scale_2 1s ease-out;
}
@-webkit-keyframes bounce_scale_2 {
  0% {
    opacity: 0;
    -webkit-transform:scale(2.5);
  }
  25%{
      opacity:1;
      -webkit-transform:scale(1);
  }
  40%{
      -webkit-transform:scale(1.1);
  }
  55%{
      -webkit-transform:scale(1);
  }
  70%{
       -webkit-transform:scale(1.02);
  }
  85%,100%{
      -webkit-transform:scale(1);
  }
}

弹性 & 自由落体

自由落体


.bounce_fall {
   -webkit-animation: bounce_fall 1s linear;
}
@-webkit-keyframes bounce_fall {
  0% {transform:translateY(-400px);}
  4% {transform:translateY(-395.16px);}
  8% {transform:translateY(-380.64px);}
  12% {transform:translateY(-356.44px);}
  16% {transform:translateY(-322.56px);}
  20% {transform:translateY(-279px);}
  24% {transform:translateY(-225.76px);}
  28% {transform:translateY(-162.84px);}
  32% {transform:translateY(-90.24px);}
  36% {transform:translateY(-7.96px);}
  40% {transform:translateY(-36px);}
  44% {transform:translateY(-66.36px);}
  48% {transform:translateY(-87.04px);}
  52% {transform:translateY(-98.04px);}
  56% {transform:translateY(-99.36px);}
  60% {transform:translateY(-91px);}
  64% {transform:translateY(-72.96px);}
  68% {transform:translateY(-45.24px);}
  72% {transform:translateY(-7.84px);}
  76% {transform:translateY(-14.76px);}
  80% {transform:translateY(-24px);}
  84% {transform:translateY(-23.56px);}
  88% {transform:translateY(-13.44px);}
  92% {transform:translateY(-2.64px);}
  96% {transform:translateY(-6.16px);}
  100% {transform:translateY(0);}
}

摇摆 & 平移

从上摇摆进入


.swing_move_1{
    -webkit-animation:swing_move_1 1s;
}
@-webkit-keyframes swing_move_1 {
  0% {
    opacity: 0;
    -webkit-transform:translateY(-480px);
  }
  25%{
    opacity:1;
    -webkit-transform:translateY(40px);
  }
  40%{
      -webkit-transform:translateY(-18px);
  }
  55%{
      -webkit-transform:translateY(8px);
  }
  70%{
      -webkit-transform:translateY(-5px);
  }
  85%{
      -webkit-transform:translateY(2px);
  }
  100%{
      -webkit-transform:translateY(0);
  }
}

从右摇摆进入


.swing_move_2{
    -webkit-animation:swing_move_2 1s;
}
@-webkit-keyframes swing_move_2{
  0% {
    opacity: 0;
    -webkit-transform:translateX(480px);
  }
  25%{
    opacity:1;
    -webkit-transform:translateX(-40px);
  }
  40%{
      -webkit-transform:translateX(18px);
  }
  55%{
      -webkit-transform:translateX(-8px);
  }
  70%{
      -webkit-transform:translateX(5px);
  }
  85%{
      -webkit-transform:translateX(-2px);
  }
  100%{
      -webkit-transform:translateX(0);
  }
}

从下摇摆进入


.swing_move_3{
    -webkit-animation:swing_move_3 1s;
}
@-webkit-keyframes swing_move_3{
  0% {
    opacity: 0;
    -webkit-transform:translateY(480px);
  }
  25%{
    opacity:1;
    -webkit-transform:translateY(-40px);
  }
  40%{
      -webkit-transform:translateY(18px);
  }
  55%{
      -webkit-transform:translateY(-8px);
  }
  70%{
      -webkit-transform:translateY(5px);
  }
  85%{
      -webkit-transform:translateY(-2px);
  }
  100%{
      -webkit-transform:translateY(0);
  }
}

从左摇摆进入


.swing_move_4{
    -webkit-animation:swing_move_4 1s;
}
@-webkit-keyframes swing_move_4{
  0% {
    opacity: 0;
    -webkit-transform:translateX(-480px);
  }
  25%{
    opacity:1;
    -webkit-transform:translateX(40px);
  }
  40%{
      -webkit-transform:translateX(-18px);
  }
  55%{
      -webkit-transform:translateX(8px);
  }
  70%{
      -webkit-transform:translateX(-5px);
  }
  85%{
      -webkit-transform:translateX(2px);
  }
  100%{
      -webkit-transform:translateX(0);
  }
}

摇摆 & 缩放

摇摆放大


.swing_scale_1{
    -webkit-animation:swing_scale_1 1s ease;
}
@-webkit-keyframes swing_scale_1{
  0% {
    opacity: 0;
    -webkit-transform:scale(0);
  }
  20%{
    opacity:1;
    -webkit-transform:scale(1.2);
  }
  35%{
      -webkit-transform:scale(0.9);
  }
  50%{
      -webkit-transform:scale(1.08);
  }
  65%{
      -webkit-transform:scale(0.96);
  }
  80%{
      -webkit-transform:scale(1.02);
  }
  95%,100%{
      -webkit-transform:scale(1);
  }
}

摇摆缩小


.swing_scale_2{
    -webkit-animation:swing_scale_2 1s;
}
@-webkit-keyframes swing_scale_2{
  0% {
    opacity: 0;
    -webkit-transform:scale(2.5);
  }
  25%{
    opacity:1;
    -webkit-transform:scale(0.84);
  }
  40%{
      -webkit-transform:scale(1.08);
  }
  55%{
      -webkit-transform:scale(0.94);
  }
  70%{
      -webkit-transform:scale(1.02);
  }
  85%{
      -webkit-transform:scale(0.99);
  }
  100%{
      -webkit-transform:scale(1);
  }
}

摇摆 & 旋转

摇摆旋转


.swing_rotate_1{
    -webkit-animation:swing_rotate_1 1s linear;
}
@-webkit-keyframes swing_rotate_1 {
    0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:0; }
    7.61% { transform: matrix3d(0.186, 0.982, 0, 0, -0.982, 0.186, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    11.41% { transform: matrix3d(-0.197, 0.98, 0, 0, -0.98, -0.197, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    15.22% { transform: matrix3d(-0.299, 0.954, 0, 0, -0.954, -0.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    19.82% { transform: matrix3d(-0.21, 0.978, 0, 0, -0.978, -0.21, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    24.32% { transform: matrix3d(-0.069, 0.998, 0, 0, -0.998, -0.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);opacity:1; }
    28.93% { transform: matrix3d(0.025, 1, 0, 0, -1, 0.025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    33.43% { transform: matrix3d(0.05, 0.999, 0, 0, -0.999, 0.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    51.55% { transform: matrix3d(-0.008, 1, 0, 0, -1, -0.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    69.77% { transform: matrix3d(0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    87.99% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    100% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

摇摆 & 斜切

飞入刹车


.swing_skew_1{
    -webkit-animation:swing_skew_1 1s ease;
    -webkit-transform-origin:0% 100%;
}
@-webkit-keyframes swing_skew_1{
  0% {
    opacity: 0;
    -webkit-transform:translateX(400px) skew(-45deg)
  }
  30%{
    opacity:1;
    -webkit-transform:translateX(0) skew(8deg);
  }
  50%{
    -webkit-transform:translateX(0) skew(-3deg);
  }
  70%{
    -webkit-transform:translateX(0) skew(1deg);
  }
}

摇摆 & 翻转

纵向翻转


.swing_flip_1{
    -webkit-animation:swing_flip_1 1s;
}
@-webkit-keyframes swing_flip_1 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
  }
}

横向翻转


.swing_flip_2{
    -webkit-animation:swing_flip_2 1s;
}
@-webkit-keyframes swing_flip_2{
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
  }
}

自由翻转


.swing_flip_3{
    -webkit-animation:swing_flip_3 1s;
}
@-webkit-keyframes swing_flip_3 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    opacity:0;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    opacity:1;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
  }
}

回弹 & 平移

从上平移回弹


.back_move_1{
    -webkit-animation:back_move_1 1s ease;
}
@-webkit-keyframes back_move_1{
  0% {
    opacity: 0;
    -webkit-transform:translateY(-400px);
  }
  45%{
    opacity:1;
    -webkit-transform:translateY(16px);
  }
  90%{
      -webkit-transform:translateY(0);
  }
}

从右平移回弹


.back_move_2{
    -webkit-animation:back_move_2 1s ease;
}
@-webkit-keyframes back_move_2{
  0% {
    opacity: 0;
    -webkit-transform:translateX(400px);
  }
  45%{
    opacity:1;
    -webkit-transform:translateX(-16px);
  }
  90%{
      -webkit-transform:translateX(0);
  }
}

从下平移回弹


.back_move_3{
    -webkit-animation:back_move_3 1s ease;
}
@-webkit-keyframes back_move_3{
  0% {
    opacity: 0;
    -webkit-transform:translateY(400px);
  }
  45%{
    opacity:1;
    -webkit-transform:translateY(-16px);
  }
  90%{
      -webkit-transform:translateY(0);
  }
}

从左平移回弹


.back_move_4{
    -webkit-animation:back_move_4 1s ease;
}
@-webkit-keyframes back_move_4{
  0% {
    opacity: 0;
    -webkit-transform:translateX(-400px);
  }
  45%{
    opacity:1;
    -webkit-transform:translateX(16px);
  }
  90%{
      -webkit-transform:translateX(0);
  }
}

回弹 & 缩放

回弹放大


.back_scale_1{
    -webkit-animation:back_scale_1 1s ease;
}
@-webkit-keyframes back_scale_1{
  0% {
    opacity: 0;
    -webkit-transform:scale(0);
  }
  45%{
    opacity:1;
    -webkit-transform:scale(1.2);
  }
  90%{
      -webkit-transform:scale(1);
  }
}

回弹缩小


.back_scale_2{
    -webkit-animation:back_scale_2 1s ease;
}
@-webkit-keyframes back_scale_2{
  0% {
    opacity: 0;
    -webkit-transform:scale(2.5);
  }
  45%{
    opacity:1;
    -webkit-transform:scale(0.8);
  }
  90%{
      -webkit-transform:scale(1);
  }
}

回弹 & 旋转 & 平移

滚车轮


.back_rotate_1{
    -webkit-animation:back_rotate_1 1s ease;
}
@-webkit-keyframes back_rotate_1{
  0% {
    opacity: 0;
    -webkit-transform:translateX(400px) rotate(360deg);
  }
  50%{
    opacity:1;
    -webkit-transform:translateX(-20px) rotate(-20deg);
  }
}

弹性果冻

果冻放大


.jelly_scale_1{
    -webkit-animation:jelly_scale_1 1s linear;
}
@-webkit-keyframes jelly_scale_1 {
  0% { transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:0;}
  3.4% { transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.7% { transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.81% { transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  9.41% { transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10.21% { transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.61% { transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.11% { transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.52% { transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:1;}
  18.72% { transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.32% { transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.32% { transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.23% { transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.03% { transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.93% { transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  35.54% { transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.74% { transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.04% { transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.44% { transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  52.15% { transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  59.86% { transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.26% { transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75.28% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  85.49% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90.69% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

果冻斜切放大


.jelly_scale_2 {
    -webkit-animation: jelly_scale_2 1s linear;
}
@-webkit-keyframes jelly_scale_2 {
  0% { transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:0;}
  3.2% { transform: matrix3d(0.345, 0.098, 0, 0, 0.065, 0.345, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.5% { transform: matrix3d(0.485, 0.163, 0, 0, 0.107, 0.485, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.41% { transform: matrix3d(0.673, 0.242, 0, 0, 0.158, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  9.01% { transform: matrix3d(0.88, 0.288, 0, 0, 0.188, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.71% { transform: matrix3d(1.064, 0.241, 0, 0, 0.159, 1.064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.51% { transform: matrix3d(1.087, 0.221, 0, 0, 0.146, 1.087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.92% { transform: matrix3d(1.139, 0.105, 0, 0, 0.07, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.92% { transform: matrix3d(1.137, 0.082, 0, 0, 0.055, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:1;}
  25.23% { transform: matrix3d(1.075, -0.001, 0, 0, -0.001, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.03% { transform: matrix3d(1.032, -0.015, 0, 0, -0.01, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  31.43% { transform: matrix3d(1.012, -0.017, 0, 0, -0.011, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  34.63% { transform: matrix3d(0.994, -0.014, 0, 0, -0.01, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40.14% { transform: matrix3d(0.985, -0.007, 0, 0, -0.005, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.46% { transform: matrix3d(1, 0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  62.36% { transform: matrix3d(1.002, 0.001, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  81.48% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  84.68% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

果冻飞入


.jelly_move_1 {
    -webkit-animation: jelly_move_1 1s linear;
}

@-webkit-keyframes jelly_move_1  {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1); }
  2.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -135.218, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -135.218, 0, 0, 1); }
  3.37% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -114.871, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -114.871, 0, 0, 1); }
  3.47% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -110.596, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -110.596, 0, 0, 1); }
  4.58% { -webkit-transform: matrix3d(1.796, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -68.65, 0, 0, 1); transform: matrix3d(1.796, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -68.65, 0, 0, 1); }
  5.69% { -webkit-transform: matrix3d(1.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -36.551, 0, 0, 1); transform: matrix3d(1.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -36.551, 0, 0, 1); }
  5.76% { -webkit-transform: matrix3d(1.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -34.768, 0, 0, 1); transform: matrix3d(1.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -34.768, 0, 0, 1); }
  7.41% { -webkit-transform: matrix3d(1.743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.804, 0, 0, 1); transform: matrix3d(1.743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.804, 0, 0, 1); }
  7.51% { -webkit-transform: matrix3d(1.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.454, 0, 0, 1); transform: matrix3d(1.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.454, 0, 0, 1); }
  7.88% { -webkit-transform: matrix3d(1.568, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 2.008, 0, 0, 1); transform: matrix3d(1.568, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 2.008, 0, 0, 1); }
  8.68% { -webkit-transform: matrix3d(1.275, 0, 0, 0, 0, 1.181, 0, 0, 0, 0, 1, 0, 9.646, 0, 0, 1); transform: matrix3d(1.275, 0, 0, 0, 0, 1.181, 0, 0, 0, 0, 1, 0, 9.646, 0, 0, 1); }
  10.03% { -webkit-transform: matrix3d(0.929, 0, 0, 0, 0, 1.333, 0, 0, 0, 0, 1, 0, 16.853, 0, 0, 1); transform: matrix3d(0.929, 0, 0, 0, 0, 1.333, 0, 0, 0, 0, 1, 0, 16.853, 0, 0, 1); }
  10.85% { -webkit-transform: matrix3d(0.798, 0, 0, 0, 0, 1.398, 0, 0, 0, 0, 1, 0, 18.613, 0, 0, 1); transform: matrix3d(0.798, 0, 0, 0, 0, 1.398, 0, 0, 0, 0, 1, 0, 18.613, 0, 0, 1); }
  11.53% { -webkit-transform: matrix3d(0.723, 0, 0, 0, 0, 1.439, 0, 0, 0, 0, 1, 0, 18.992, 0, 0, 1); transform: matrix3d(0.723, 0, 0, 0, 0, 1.439, 0, 0, 0, 0, 1, 0, 18.992, 0, 0, 1); }
  12.22% { -webkit-transform: matrix3d(0.673, 0, 0, 0, 0, 1.469, 0, 0, 0, 0, 1, 0, 18.618, 0, 0, 1); transform: matrix3d(0.673, 0, 0, 0, 0, 1.469, 0, 0, 0, 0, 1, 0, 18.618, 0, 0, 1); }
  14.18% { -webkit-transform: matrix3d(0.622, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 15.054, 0, 0, 1); transform: matrix3d(0.622, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 15.054, 0, 0, 1); }
  14.37% { -webkit-transform: matrix3d(0.622, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 14.604, 0, 0, 1); transform: matrix3d(0.622, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 14.604, 0, 0, 1); }
  19.23% { -webkit-transform: matrix3d(0.739, 0, 0, 0, 0, 1.371, 0, 0, 0, 0, 1, 0, 3.855, 0, 0, 1); transform: matrix3d(0.739, 0, 0, 0, 0, 1.371, 0, 0, 0, 0, 1, 0, 3.855, 0, 0, 1); }
  20.01% { -webkit-transform: matrix3d(0.764, 0, 0, 0, 0, 1.338, 0, 0, 0, 0, 1, 0, 2.724, 0, 0, 1); transform: matrix3d(0.764, 0, 0, 0, 0, 1.338, 0, 0, 0, 0, 1, 0, 2.724, 0, 0, 1); }
  23.05% { -webkit-transform: matrix3d(0.856, 0, 0, 0, 0, 1.211, 0, 0, 0, 0, 1, 0, 0.036, 0, 0, 1); transform: matrix3d(0.856, 0, 0, 0, 0, 1.211, 0, 0, 0, 0, 1, 0, 0.036, 0, 0, 1); }
  25.75% { -webkit-transform: matrix3d(0.922, 0, 0, 0, 0, 1.114, 0, 0, 0, 0, 1, 0, -0.709, 0, 0, 1); transform: matrix3d(0.922, 0, 0, 0, 0, 1.114, 0, 0, 0, 0, 1, 0, -0.709, 0, 0, 1); }
  26.94% { -webkit-transform: matrix3d(0.946, 0, 0, 0, 0, 1.078, 0, 0, 0, 0, 1, 0, -0.76, 0, 0, 1); transform: matrix3d(0.946, 0, 0, 0, 0, 1.078, 0, 0, 0, 0, 1, 0, -0.76, 0, 0, 1); }
  31.58% { -webkit-transform: matrix3d(1.009, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, -0.406, 0, 0, 1); transform: matrix3d(1.009, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, -0.406, 0, 0, 1); }
  31.73% { -webkit-transform: matrix3d(1.01, 0, 0, 0, 0, 0.986, 0, 0, 0, 0, 1, 0, -0.392, 0, 0, 1); transform: matrix3d(1.01, 0, 0, 0, 0, 0.986, 0, 0, 0, 0, 1, 0, -0.392, 0, 0, 1); }
  37.32% { -webkit-transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.03, 0, 0, 1); transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.03, 0, 0, 1); }
  38.15% { -webkit-transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.008, 0, 0, 1); transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.008, 0, 0, 1); }
  42.35% { -webkit-transform: matrix3d(1.022, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0.03, 0, 0, 1); transform: matrix3d(1.022, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0.03, 0, 0, 1); }
  48.9% { -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0.009, 0, 0, 1); transform: matrix3d(1.007, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0.009, 0, 0, 1); }
  57.77% { -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1); transform: matrix3d(0.998, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1); }
  60.47% { -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1); transform: matrix3d(0.998, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1); }
  69.36% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.61% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

震动

普通震动


.shake_1{
    -webkit-animation:shake_1 .2s infinite;
}

@-webkit-keyframes shake_1 {
	2%{ -webkit-transform: translate(-.5px, .5px) rotate(-.5deg);}
	4% { -webkit-transform: translate(2.5px, .5px) rotate(-.5deg);}
	6% { -webkit-transform: translate(-.5px, 1.5px) rotate(1.5deg);}
	8% { -webkit-transform: translate(.5px, .5px) rotate(-.5deg);}
	10% { -webkit-transform: translate(-.5px, -1.5px) rotate(-.5deg);}
	12% { -webkit-transform: translate(.5px, -.5px) rotate(1.5deg);}
	14% { -webkit-transform: translate(1.5px, 2.5px) rotate(-.5deg);}
	16% { -webkit-transform: translate(-.5px, -.5px) rotate(.5deg);}
	18% { -webkit-transform: translate(2.5px, .5px) rotate(.5deg);}
	20% { -webkit-transform: translate(.5px, -1.5px) rotate(-.5deg);}
	22% { -webkit-transform: translate(2.5px, 2.5px) rotate(-.5deg);}
	24% { -webkit-transform: translate(2.5px, 1.5px) rotate(1.5deg);}
	26% { -webkit-transform: translate(.5px, 1.5px) rotate(-.5deg);}
	28% { -webkit-transform: translate(1.5px, .5px) rotate(.5deg);}
	30% { -webkit-transform: translate(-1.5px, 2.5px) rotate(1.5deg);}
	32% { -webkit-transform: translate(.5px, .5px) rotate(.5deg);}
	34% { -webkit-transform: translate(.5px, 1.5px) rotate(1.5deg);}
	36% { -webkit-transform: translate(2.5px, -.5px) rotate(1.5deg);}
	38% { -webkit-transform: translate(.5px, 1.5px) rotate(1.5deg);}
	40% { -webkit-transform: translate(2.5px, 1.5px) rotate(1.5deg);}
	42% { -webkit-transform: translate(2.5px, -1.5px) rotate(.5deg);}
	44% { -webkit-transform: translate(.5px, -.5px) rotate(.5deg);}
	46% { -webkit-transform: translate(1.5px, -1.5px) rotate(.5deg);}
	48% { -webkit-transform: translate(-1.5px, -.5px) rotate(.5deg);}
	50% { -webkit-transform: translate(2.5px, -1.5px) rotate(1.5deg);}
	52% { -webkit-transform: translate(.5px, 1.5px) rotate(.5deg);}
	54% { -webkit-transform: translate(2.5px, -.5px) rotate(.5deg);}
	56% { -webkit-transform: translate(2.5px, 2.5px) rotate(.5deg);}
	58% { -webkit-transform: translate(2.5px, 1.5px) rotate(-.5deg);}
	60% { -webkit-transform: translate(1.5px, 1.5px) rotate(-.5deg);}
	62% { -webkit-transform: translate(-.5px, .5px) rotate(-.5deg);}
	64% { -webkit-transform: translate(2.5px, 1.5px) rotate(-.5deg);}
	66% { -webkit-transform: translate(-1.5px, .5px) rotate(1.5deg);}
	68% { -webkit-transform: translate(1.5px, -1.5px) rotate(.5deg);}
	70% { -webkit-transform: translate(.5px, .5px) rotate(-.5deg);}
	72% { -webkit-transform: translate(-.5px, 1.5px) rotate(1.5deg);}
	74% { -webkit-transform: translate(-1.5px, 1.5px) rotate(1.5deg);}
	76% { -webkit-transform: translate(2.5px, -.5px) rotate(.5deg);}
	78% { -webkit-transform: translate(2.5px, 2.5px) rotate(.5deg);}
	80% { -webkit-transform: translate(-1.5px, 2.5px) rotate(.5deg);}
	82% { -webkit-transform: translate(-1.5px, -.5px) rotate(.5deg);}
	84% { -webkit-transform: translate(.5px, 1.5px) rotate(-.5deg);}
	86% { -webkit-transform: translate(-.5px, 2.5px) rotate(.5deg);}
	88% { -webkit-transform: translate(2.5px, 2.5px) rotate(1.5deg);}
	90% { -webkit-transform: translate(-.5px, -1.5px) rotate(-.5deg);}
	92% { -webkit-transform: translate(1.5px, .5px) rotate(.5deg);}
	94% { -webkit-transform: translate(-.5px, -.5px) rotate(.5deg);}
	96% { -webkit-transform: translate(1.5px, .5px) rotate(1.5deg);}
	98% { -webkit-transform: translate(.5px, -.5px) rotate(1.5deg);}
	0%,100% { -webkit-transform: translate(0, 0) rotate(0);}
}

剧烈震动


.shake_2{
    -webkit-animation:shake_2 .2s infinite;
}
@-webkit-keyframes shake_2 {
	2% { -webkit-transform: translate(-4px, 2px) rotate(1.5deg);}
	4% { -webkit-transform: translate(-8px, 10px) rotate(-1.5deg);}
	6% { -webkit-transform: translate(2px, -6px) rotate(-.5deg);}
	8% { -webkit-transform: translate(10px, 10px) rotate(-1.5deg);}
	10% { -webkit-transform: translate(8px, 4px) rotate(.5deg);}
	12% { -webkit-transform: translate(2px, 6px) rotate(-.5deg);}
	14% { -webkit-transform: translate(10px, -8px) rotate(.5deg);}
	16% { -webkit-transform: translate(-9px, -5px) rotate(3.5deg);}
	18% { -webkit-transform: translate(9px, -9px) rotate(-1.5deg);}
	20% { -webkit-transform: translate(2px, 1px) rotate(1.5deg);}
	22% { -webkit-transform: translate(-4px, 1px) rotate(2.5deg);}
	24% { -webkit-transform: translate(-7px, 4px) rotate(-1.5deg);}
	26% { -webkit-transform: translate(-6px, -1px) rotate(-2.5deg);}
	28% { -webkit-transform: translate(6px, 0px) rotate(-1.5deg);}
	30% { -webkit-transform: translate(-6px, 6px) rotate(3.5deg);}
	32% { -webkit-transform: translate(5px, 7px) rotate(3.5deg);}
	34% { -webkit-transform: translate(-5px, 5px) rotate(3.5deg);}
	36% { -webkit-transform: translate(-8px, -3px) rotate(-2.5deg);}
	38% { -webkit-transform: translate(-3px, 5px) rotate(-2.5deg);}
	40% { -webkit-transform: translate(8px, -4px) rotate(1.5deg);}
	42% { -webkit-transform: translate(2px, -8px) rotate(2.5deg);}
	44% { -webkit-transform: translate(5px, -7px) rotate(-1.5deg);}
	46% { -webkit-transform: translate(8px, -4px) rotate(1.5deg);}
	48% { -webkit-transform: translate(1px, -4px) rotate(.5deg);}
	50% { -webkit-transform: translate(-7px, 7px) rotate(3.5deg);}
	52% { -webkit-transform: translate(7px, -5px) rotate(3.5deg);}
	54% { -webkit-transform: translate(10px, -5px) rotate(1.5deg);}
	56% { -webkit-transform: translate(-1px, -8px) rotate(1.5deg);}
	58% { -webkit-transform: translate(2px, -2px) rotate(-1.5deg);}
	60% { -webkit-transform: translate(-8px, 0px) rotate(2.5deg);}
	62% { -webkit-transform: translate(9px, -5px) rotate(-2.5deg);}
	64% { -webkit-transform: translate(8px, -9px) rotate(.5deg);}
	66% { -webkit-transform: translate(-6px, -7px) rotate(-2.5deg);}
	68% { -webkit-transform: translate(-1px, -4px) rotate(-1.5deg);}
	70% { -webkit-transform: translate(10px, -8px) rotate(-1.5deg);}
	72% { -webkit-transform: translate(3px, 6px) rotate(-2.5deg);}
	74% { -webkit-transform: translate(-1px, 8px) rotate(-.5deg);}
	76% { -webkit-transform: translate(-3px, 7px) rotate(1.5deg);}
	78% { -webkit-transform: translate(9px, 0px) rotate(2.5deg);}
	80% { -webkit-transform: translate(9px, -5px) rotate(3.5deg);}
	82% { -webkit-transform: translate(9px, 8px) rotate(-.5deg);}
	84% { -webkit-transform: translate(-3px, -3px) rotate(-2.5deg);}
	86% { -webkit-transform: translate(-8px, -1px) rotate(3.5deg);}
	88% { -webkit-transform: translate(5px, 2px) rotate(3.5deg);}
	90% { -webkit-transform: translate(5px, 9px) rotate(-.5deg);}
	92% { -webkit-transform: translate(7px, 5px) rotate(1.5deg);}
	94% { -webkit-transform: translate(8px, 8px) rotate(-.5deg);}
	96% { -webkit-transform: translate(2px, 10px) rotate(-2.5deg);}
	98% { -webkit-transform: translate(-5px, 10px) rotate(-2.5deg);}
	0%,100% { -webkit-transform: translate(0, 0) rotate(0);}
}

横向震动


.shake_3{
    -webkit-animation:shake_3 .1s infinite;
}
@-webkit-keyframes shake_3 {
	2% { -webkit-transform: translate(4px, 0);}
	4% { -webkit-transform: translate(8px, 0);}
	6% { -webkit-transform: translate(7px, 0);}
	8% { -webkit-transform: translate(2px, 0);}
	10% { -webkit-transform: translate(0px, 0);}
	12% { -webkit-transform: translate(7px, 0);}
	14% { -webkit-transform: translate(-6px, 0);}
	16% { -webkit-transform: translate(-5px, 0);}
	18% { -webkit-transform: translate(-8px, 0);}
	20% { -webkit-transform: translate(-9px, 0);}
	22% { -webkit-transform: translate(9px, 0);}
	24% { -webkit-transform: translate(-8px, 0);}
	26% { -webkit-transform: translate(-8px, 0);}
	28% { -webkit-transform: translate(2px, 0);}
	30% { -webkit-transform: translate(10px, 0);}
	32% { -webkit-transform: translate(6px, 0);}
	34% { -webkit-transform: translate(-6px, 0);}
	36% { -webkit-transform: translate(7px, 0);}
	38% { -webkit-transform: translate(-9px, 0);}
	40% { -webkit-transform: translate(-4px, 0);}
	42% { -webkit-transform: translate(-4px, 0);}
	44% { -webkit-transform: translate(1px, 0);}
	46% { -webkit-transform: translate(-2px, 0);}
	48% { -webkit-transform: translate(-4px, 0);}
	50% { -webkit-transform: translate(-2px, 0);}
	52% { -webkit-transform: translate(10px, 0);}
	54% { -webkit-transform: translate(-9px, 0);}
	56% { -webkit-transform: translate(0px, 0);}
	58% { -webkit-transform: translate(-8px, 0);}
	60% { -webkit-transform: translate(-4px, 0);}
	62% { -webkit-transform: translate(7px, 0);}
	64% { -webkit-transform: translate(-1px, 0);}
	66% { -webkit-transform: translate(-7px, 0);}
	68% { -webkit-transform: translate(1px, 0);}
	70% { -webkit-transform: translate(-5px, 0);}
	72% { -webkit-transform: translate(0px, 0);}
	74% { -webkit-transform: translate(-4px, 0);}
	76% { -webkit-transform: translate(5px, 0);}
	78% { -webkit-transform: translate(2px, 0);}
	80% { -webkit-transform: translate(2px, 0);}
	82% { -webkit-transform: translate(-1px, 0);}
	84% { -webkit-transform: translate(9px, 0);}
	86% { -webkit-transform: translate(-6px, 0);}
	88% { -webkit-transform: translate(8px, 0);}
	90% { -webkit-transform: translate(3px, 0);}
	92% { -webkit-transform: translate(10px, 0);}
	94% { -webkit-transform: translate(-4px, 0);}
	96% { -webkit-transform: translate(-6px, 0);}
	98% { -webkit-transform: translate(7px, 0);}
	0%,100% { -webkit-transform: translate(0, 0);}
}

纵向震动


.shake_4{
    -webkit-animation:shake_4 .1s infinite;
}
@-webkit-keyframes shake_4 {
	2% { -webkit-transform: translate(0, -2px); }
	4% { -webkit-transform: translate(0, -2px);}
	6% { -webkit-transform: translate(0, 2px);}
	8% { -webkit-transform: translate(0, 9px);}
	10% { -webkit-transform: translate(0, 3px);}
	12% { -webkit-transform: translate(0, 4px);}
	14% { -webkit-transform: translate(0, -8px);}
	16% { -webkit-transform: translate(0, -8px);}
	18% { -webkit-transform: translate(0, -6px);}
	20% { -webkit-transform: translate(0, 5px);}
	22% { -webkit-transform: translate(0, 5px);}
	24% { -webkit-transform: translate(0, -8px);}
	26% { -webkit-transform: translate(0, -4px);}
	28% { -webkit-transform: translate(0, 2px);}
	30% { -webkit-transform: translate(0, -1px);}
	32% { -webkit-transform: translate(0, 1px);}
	34% { -webkit-transform: translate(0, -7px);}
	36% { -webkit-transform: translate(0, -7px);}
	38% { -webkit-transform: translate(0, 2px);}
	40% { -webkit-transform: translate(0, -1px);}
	42% { -webkit-transform: translate(0, 8px);}
	44% { -webkit-transform: translate(0, -5px);}
	46% { -webkit-transform: translate(0, -8px);}
	48% { -webkit-transform: translate(0, -1px);}
	50% { -webkit-transform: translate(0, 1px);}
	52% { -webkit-transform: translate(0, 1px);}
	54% { -webkit-transform: translate(0, -4px);}
	56% { -webkit-transform: translate(0, 4px);}
	58% { -webkit-transform: translate(0, 3px);}
	60% { -webkit-transform: translate(0, -7px);}
	62% { -webkit-transform: translate(0, 4px);}
	64% { -webkit-transform: translate(0, 0px);}
	66% { -webkit-transform: translate(0, -5px);}
	68% { -webkit-transform: translate(0, -2px);}
	70% { -webkit-transform: translate(0, -4px);}
	72% { -webkit-transform: translate(0, 9px);}
	74% { -webkit-transform: translate(0, -3px);}
	76% { -webkit-transform: translate(0, -4px);}
	78% { -webkit-transform: translate(0, -9px);}
	80% { -webkit-transform: translate(0, -8px);}
	82% { -webkit-transform: translate(0, -6px);}
	84% { -webkit-transform: translate(0, 9px);}
	86% { -webkit-transform: translate(0, -4px);}
	88% { -webkit-transform: translate(0, -9px);}
	90% { -webkit-transform: translate(0, -2px);}
	92% { -webkit-transform: translate(0, 7px);}
	94% { -webkit-transform: translate(0, -1px);}
	96% { -webkit-transform: translate(0, 7px);}
	98% { -webkit-transform: translate(0, -1px);}
	0%,100% { -webkit-transform: translate(0, 0);}
}

旋转震动


.shake_5{
    -webkit-animation:shake_5 .1s infinite;
}
@-webkit-keyframes shake_5{
	2% { -webkit-transform:rotate(3.5deg);}
	4% { -webkit-transform:rotate(-.5deg);}
	6% { -webkit-transform:rotate(-1.5deg);}
	8% { -webkit-transform:rotate(4.5deg);}
	10% { -webkit-transform:rotate(6.5deg);}
	12% { -webkit-transform:rotate(.5deg);}
	14% { -webkit-transform:rotate(-4.5deg);}
	16% { -webkit-transform:rotate(5.5deg);}
	18% { -webkit-transform:rotate(-6.5deg);}
	20% { -webkit-transform:rotate(1.5deg);}
	22% { -webkit-transform:rotate(-5.5deg);}
	24% { -webkit-transform:rotate(-4.5deg);}
	26% { -webkit-transform:rotate(-.5deg);}
	28% { -webkit-transform:rotate(7.5deg);}
	30% { -webkit-transform:rotate(-1.5deg);}
	32% { -webkit-transform:rotate(4.5deg);}
	34% { -webkit-transform:rotate(5.5deg);}
	36% { -webkit-transform:rotate(1.5deg);}
	38% { -webkit-transform:rotate(-2.5deg);}
	40% { -webkit-transform:rotate(6.5deg);}
	42% { -webkit-transform:rotate(4.5deg);}
	44% { -webkit-transform:rotate(2.5deg);}
	46% { -webkit-transform:rotate(4.5deg);}
	48% { -webkit-transform:rotate(-5.5deg);}
	50% { -webkit-transform:rotate(-6.5deg);}
	52% { -webkit-transform:rotate(-4.5deg);}
	54% { -webkit-transform:rotate(2.5deg);}
	56% { -webkit-transform:rotate(-5.5deg);}
	58% { -webkit-transform:rotate(-5.5deg);}
	60% { -webkit-transform:rotate(-6.5deg);}
	62% { -webkit-transform:rotate(6.5deg);}
	64% { -webkit-transform:rotate(-1.5deg);}
	66% { -webkit-transform:rotate(-5.5deg);}
	68% { -webkit-transform:rotate(-2.5deg);}
	70% { -webkit-transform:rotate(6.5deg);}
	72% { -webkit-transform:rotate(3.5deg);}
	74% { -webkit-transform:rotate(3.5deg);}
	76% { -webkit-transform:rotate(-2.5deg);}
	78% { -webkit-transform:rotate(-6.5deg);}
	80% { -webkit-transform:rotate(1.5deg);}
	82% { -webkit-transform:rotate(4.5deg);}
	84% { -webkit-transform:rotate(.5deg);}
	86% { -webkit-transform:rotate(3.5deg);}
	88% { -webkit-transform:rotate(5.5deg);}
	90% { -webkit-transform:rotate(7.5deg);}
	92% { -webkit-transform:rotate(-5.5deg);}
	94% { -webkit-transform:rotate(7.5deg);}
	96% { -webkit-transform:rotate(-2.5deg);}
	98% { -webkit-transform:rotate(6.5deg);}
	0%,100% { -webkit-transform:rotate(0);}
}

闪烁震动


.shake_6{
    -webkit-animation:shake_6 .1s infinite;
}
@-webkit-keyframes shake_6 {
	10% {
		-webkit-transform: translate(5px, 4px) rotate(-.5deg);
		opacity: .32
	}
	20% {
        -webkit-transform: translate(-1px, 2px) rotate(.5deg);
		opacity: .63
	}
	30% {
        -webkit-transform: translate(1px, 1px) rotate(1.5deg);
		opacity: .49
	}
	40% {
        -webkit-transform: translate(3px, -1px) rotate(1.5deg);
		opacity: .81
	}
	50% {
        -webkit-transform: translate(1px, -2px) rotate(-.5deg);
		opacity: .97
	}
	60% {
        -webkit-transform: translate(-2px, -4px) rotate(2.5deg);
		opacity: .7
	}
	70% {
        -webkit-transform: translate(-3px, -2px) rotate(1.5deg);
		opacity: .99
	}
	80% {
        -webkit-transform: translate(3px, -1px) rotate(.5deg);
		opacity: .92
	}
	90% {
        -webkit-transform: translate(-4px, -4px) rotate(-.5deg);
		opacity: .01
	}
	0%,100% {
        -webkit-transform: translate(0, 0) rotate(0);
	}
}

其他

果冻


.anima_jelly {
    -webkit-animation: anima_jelly 2s infinite;
}

@-webkit-keyframes anima_jelly {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  15% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }
  20% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1)
  }
  25% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }
  32.5% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }
  37.5% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }
  50% ,100%{
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}

摇摆


.anima_swing{
    -webkit-animation:anima_swing 2s infinite;
    -webkit-transform-origin:50% 0%;
}

@-webkit-keyframes anima_swing {
  30% {
    -webkit-transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
  }
  60% {
    -webkit-transform: rotate(-2deg);
  }
  70% {
    -webkit-transform: rotate(0deg);
  }
}


.anima_wobble{
    -webkit-animation:anima_wobble 2s infinite;
}

@-webkit-keyframes anima_wobble{
  7.5% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
  }
  15% {
    -webkit-transform: translateX(20%) rotate(3deg);
  }
  22.5% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
  }
  30% {
    -webkit-transform: translateX(10%) rotate(2deg);
  }
  37.5% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
  }
  50%{
      -webkit-transform: translateX(0) rotate(0deg)
  }
}

提醒


.anima_tada{
    -webkit-animation:anima_tada 2s infinite;
}
@-webkit-keyframes anima_tada {
  0% {
    -webkit-transform: scale(1);
  }
  5%,10% {
    -webkit-transform: scale(.8) rotate(-5deg);
  }
  15%,25%,35%,45% {
    -webkit-transform: scale(1.1) rotate(3deg);
  }
  20%,30%,40% {
    -webkit-transform: scale(1.1) rotate(-3deg);
  }
  50% ,100%{
    -webkit-transform: scale(1);
  }
}

钟摆

.anima_clock{
    -webkit-animation:anima_clock 2s ease-in-out infinite;
    -webkit-transform-origin:50% -300%;
}
@-webkit-keyframes anima_clock {
  0% ,100%{
    -webkit-transform:rotate(-30deg);
  }
  50% {
    -webkit-transform:rotate(30deg);
  }
}