css3，可以为一个元素添加多个动画

旧城等待， 2022-08-04 04:08 370阅读 0赞

例如：

.screen3.on .text5 \{

animation: 1.4s 3s ease-out forwards show, 1.6s 4.4s ease forwards text5, 1.2s 6s linear infinite wobble;  
  -webkit-animation: 1.4s 3s ease-out forwards show, 1.6s 4.4s ease forwards text5, 1.2s 6s linear infinite wobble;

@keyframes show \{  
  0% \{  
    opacity: 0;  
  \}  
  100% \{  
    opacity: 1;  
  \}  
\}  
@-webkit-keyframes show \{  
  0% \{  
    opacity: 0;  
  \}  
  100% \{  
    opacity: 1;  
  \}  
\}

@keyframes text5 \{  
  0% \{  
    transform: scale(0.8);  
  \}  
  50% \{  
    transform: scale(1.2);  
  \}  
  100% \{  
    transform: scale(0.8);  
  \}  
\}

@keyframes wobble \{  
  0% \{  
    transform: translateX(0) rotate(0) scale(0.8);  
  \}  
  15% \{  
    transform: translateX(-2px) rotate(-1deg) scale(0.8);  
  \}  
  30% \{  
    transform: translateX(2px) rotate(1deg) scale(0.8);  
  \}  
  45% \{  
    transform: translateX(-2px) rotate(-1deg) scale(0.8);  
  \}  
  60% \{  
    transform: translateX(2px) rotate(1deg) scale(0.8);  
  \}  
  75% \{  
    transform: translateX(-2px) rotate(-1deg) scale(0.8);  
  \}  
  100% \{  
    transform: translateX(0px) rotate(0) scale(0.8);  
  \}  
\}  
@-webkit-keyframes wobble \{  
  0% \{  
    -webkit-transform: translateX(0) rotate(0) scale(0.8);  
  \}  
  15% \{  
    -webkit-transform: translateX(-2px) rotate(-1deg) scale(0.8);  
  \}  
  30% \{  
    -webkit-transform: translateX(2px) rotate(1deg) scale(0.8);  
  \}  
  45% \{  
    -webkit-transform: translateX(-2px) rotate(-1deg) scale(0.8);  
  \}  
  60% \{  
    -webkit-transform: translateX(2px) rotate(1deg) scale(0.8);  
  \}  
  75% \{  
    -webkit-transform: translateX(-2px) rotate(-1deg) scale(0.8);  
  \}  
  100% \{  
    -webkit-transform: translateX(0px) rotate(0) scale(0.8);  
  \}  
\}  
@-webkit-keyframes text5 \{  
  0% \{  
    -webkit-transform: scale(0.8);  
  \}  
  50% \{  
    -webkit-transform: scale(1.2);  
  \}  
  100% \{  
    -webkit-transform: scale(0.8);  
  \}  
\}

不过动画播放的时间点要错开。