ホームページ > ウェブフロントエンド > htmlチュートリアル > css3では、1つのelement_html/css_WEB-ITnoseに複数のアニメーションを追加できます

css3では、1つのelement_html/css_WEB-ITnoseに複数のアニメーションを追加できます

WBOY
リリース: 2016-06-24 11:38:44
オリジナル
1709 人が閲覧しました

例:

.screen3.on .text5 {

アニメーション: 1.4 秒 3 秒イーズアウト フォワード ショー、1.6 秒 4.4 秒イーズ フォワード text5、1.2 秒 6 秒リニア無限ウォブル;
-webkit-animation: 1.4 秒 3 秒イーズアウト フォワード ショー、1.6 秒 4.4 秒イーズ フォワード テキスト 5、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);
}
}

不过动画播放の時点要错开。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート