css简单动画以及一些小理解

/定义旋转基点 右上角/
/transform-origin: right top;/
/谷歌浏览器前缀 手机端使用这个前缀 rotate 旋转 立体旋转角度 如果没有说明 x y 就默认 xy 轴立体旋转 下图为xy轴立体旋转90度 立体旋转/
/-webkit-transform: rotate(90deg);/
/火狐浏览器前缀/
/-moz-transform: rotate(90deg);/
/ie 浏览器前缀/
/-ms-transform: rotate(90deg);/
/欧朋浏览器前缀/
/-o-transform: rotate(90deg);/
/transform: rotate(90deg);/
/定义绕x轴立体旋转90度 立体旋转/
/transform: rotateX(90deg);/
/定义绕y轴立体旋转90度 立体旋转/
/transform: rotateY(90deg);/
/skew 扭曲 此为相对x轴倾斜 90度; 相对y轴倾斜90度/
/transform: skew(90deg,90deg);/
/scale 如果大于1 就是 放大 :如果小于1 就是等比例缩小/
/scale 缩放 此为 xy 轴都放大2 倍;/
/transform: scale(2);/
/此为 相对x轴放大4倍 ,相对y轴放大5倍/
/transform: scale(4,5);/
/translate 移动/
/沿x轴 向左移动 1000px/
/transform: translateX(-1000px);/
/沿x轴向右移动1000/
/transform: translateX(1000px);/
/沿y轴向下移动1000px/
/transform: translatey(1000px);/
/沿y轴向上移动1000px/
/transform: translatey(-1000);/

/* 闪烁 /
@keyframes flash{
/ 50%的时候 过度动画效果 执行下面样式 /
from,
50%,
to
{
opacity: 1;
}
25%,75%{
opacity: 0;
}
}
.flash{
animation-name: flash;
text-align: center;
}
/ 3频率快闪 */
@keyframes flasher{
0%,33%,66%,100%{
opacity: 1;
}
16%,48%,82%{
opacity: 0;
}
}
.flasher{
animation-name: flasher;
text-align: center;
}
@keyframes pules{
0%,50%,100%{
transform:scale3d(1,1,1);
}
50%{
transform: scale3d(1.05,1.05,1.05);
}
}
.pules{
animation-name: pules;
text-align: center;
}

/* 字体放大动画 */
@keyframes pulesFont{

50%{
font-size: 50px;
/* 设置字符之间间距 */
letter-spacing: 50px;
}
}
.pulesFont{
animation-name: pulesFont;
text-align: center;
}
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}

40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}

50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}

65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}

75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}

to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

.rubberBand {
text-align: center;

animation-name: rubberBand;
}
/* 抖动 */
@keyframes shake{
0%,100%{
transform: translate3d(0,0,0);
}
10%,30%,50%,70%,90%{
transform: translate3d(20px,0,0);
}
20%,40%,60%,80%{
transform: translate3d(0,10px,0px);
}

}
.shake{
animation-name: shake;
text-align: center;
}
/* 摇摆 /
@keyframes swing{
20%{
/ 绕z轴 旋转 15度 */
transform: rotate3d(0,0,0,360deg);
}
40%{
transform: rotate3d(0,0,1，-360deg);
}
60%{
transform: rotate3d(0,0,1,360deg);
}
80%{
transform: rotate3d(0,0,1,-360deg);
}
}
.swing{
animation-name: swing;
text-align: center;
letter-spacing: 50px;

}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}

30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}

40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}

to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

.tada {
-webkit-animation-name: tada;
animation-name: tada;
text-align: center;
}
@keyframes turntable{
/* 通过让元素在x轴左右平移z轴旋转 */
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

15% {
  -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}

30% {
  -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}

45% {
  -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}

60% {
  -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}

75% {
  -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}

to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

}

.turntable {

animation-name: turntable;
text-align: center;

}
/* 拉伸动画 */

@keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}

33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}

44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}

55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}

66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}

77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}

88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}

.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
text-align: center;
}
/* 左侧闪现 */
@keyframes lightenout{
0%,50%,100%{
transform: rotate3d(0,0,0);
}
25%,80%{
transform: rotateY(90deg);
}
}
@keyframes lightenoutright{
0%,50%,100%{
transform: rotate3d(0,0,0);
}
25%,80%{
transform: rotateY(90deg);
}
}
@keyframes lightenoutleft{
0%,50%,100%{
transform: rotate3d(0,0,0);
}
25%,80%{
transform: rotateY(90deg);
}
}
.lightenout{
animation-name: lightenout;
transform-origin: center;

}
.lightenoutright{
transform-origin: right;
animation-name: lightenoutright;
}
.lightenoutleft{
transform-origin: left;
animation-name: lightenoutleft;
}
/* 开幕式 */
@keyframes inauguauration{
from{
transform: rotateX(90deg);
}
to{
transform: rotate3d(0,0,0);
}
}
.inauguauration{

animation-name: inauguauration;
transform-origin: center;
font-size: 100px;
background-color: black;
color: white;
animation: inauguauration 3s infinite linear;
}
.inauguaurationTop{
animation-name: inauguauration;
transform-origin: top;
background-color: black;
color: white;
font-size: 20px;

}
.inauguaurationBottom{
animation-name: inauguauration;
transform-origin: bottom;
background-color: black;
color: white;
font-size: 20px;

}
@keyframes heartBeat{
from,50%,to{
transform: scale(1);
}
25%,80%{
transform: scale(3);
}
}
.heartBeat{
animation-name: heartBeat;
animation: heartBeat 1s infinite linear;
}