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

渐隐渐显

@-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); } }