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

亦凉 2023-05-31 07:16 40阅读 0赞

/*定义旋转基点 右上角*/  
/*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;  
\}