ホームページ > 記事 > ウェブフロントエンド > css3では、1つのelement_html/css_WEB-ITnoseに複数のアニメーションを追加できます
例:
.screen3.on .text5 {
アニメーション: 1.4 秒 3 秒イーズアウト フォワード ショー、1.6 秒 4.4 秒イーズ フォワード text5、1.2 秒 6 秒リニア無限ウォブル;}
@keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes show {
0 % {
不透明度: 0;
}
100% {
opacity: 1;
}
}
@keyframes text5 {
0% {
Transform:scale(0.8);
}
50% {
変換: スケール(1.2);
}
100% {
変換:scale(0.8);
}
}
@keyframes ウォブル {
0% {
変換:translateX(0) 回転(0) スケール(0.8);
}
15% {
変換:translateX(-2px) 回転(-1度) スケール(0.8);
}
30% {
変換:translateX(2px) 回転(1度) スケール(0.8);
}
45% {
変換:変換X(-2px) 回転(-1度) スケール(0.8);
}
60% {
変換: 変換X(2px) 回転(1度) スケール(0.8);
}
75% {
変換: 変換X(-2px) ) 回転(-1度) スケール(0.8);
}
100% {
変換:translateX(0px) 回転(0) スケール(0.8);
}
}
@-webkit-keyframes wobble {
0% {
-webkit-transform:translateX(0) 回転(0) スケール(0.8);
}
15% {
-webkit-transform: トランスレートX(-2px) 回転(-1度) スケール(0.8);
}
30% {
-webkit-transform: トランスレートX(2px) 回転(1度) スケール(0.8);
}
45% {
-webkit-transform: トランスレートX(-2px) 回転(-1度) スケール(0.8);
}
60% {
-webkit-transform: トランスレートX(2px) 回転(1度) スケール(0.8);
}
75% {
-webkit-transform: トランスレートX(-2px) 回転(-1度) スケール(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);
}
}