ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 アニメーション効果_html/css_WEB-ITnose

CSS3 アニメーション効果_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:42:391121ブラウズ

渐隐渐显

@-webkit-keyframes cf3FadeInOut { 0% { 不透明度:1; } 20% { 不透明度:.8; 50% { 不透明度:0.5; } 70%{ 不透明度: .3;} 100% { 不透明度: 0; } } div.bg { -webkit アニメーション名: cf3FadeInOut; -webkit-animation-timing-function: イーズインアウト; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 3 秒; }

晃アニメーション

.hand-animate { -webkit-animation: hand_move 無限 2 秒; } @-webkit-keyframes hand_move { 0% { -webkit-transform:rotate(0); -moz-transform: 回転(0); -ms-transform: 回転(0); -o-transform: 回転(0);変換: 回転(0); } 50% { -webkit-transform: 回転(15度); -moz-transform: 回転(15度); -ms-transform: 回転(15度); -o-transform: 回転(15度);変換: 回転(15 度); } 100% { -webkit-transform: 回転(0); -moz-transform: 回転(0); -ms-transform: 回転(0); -o-transform: 回転(0);変換: 回転(0); } }
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。