cssアニメーション効果
6602 ワード
， css3 ：CSS 3アニメーション
CSS 3では、アニメーション画像、Flashアニメーション、JavaScriptの代わりに多くのWebページでアニメーションを作成できます.
重要な知識
CSS 3@keyframesルール
CSS 3でアニメーションを作成するには@keyframesルールを学習する必要があります.
@keyframesルールは、アニメーションを作成するために使用されます.@keyframesでCSSスタイルを指定すると、現在のスタイルから徐々に新しいスタイルに変更されるアニメーション効果が作成されます.
CSS 3アニメーション属性
次の表には、@keyframesルールとすべてのアニメーションプロパティが表示されます.
属性説明CSS
@keyframesアニメーションを指定します.3
animationアニメーションアトリビュートのすべてのスケッチアトリビュート(animation-play-stateアトリビュートを除く)3
animation-name@keyframesアニメーションの名前を指定します.3
animation-durationは、アニメーションが1サイクルを完了するのにかかる秒またはミリ秒を規定する.デフォルトは0です.3
animation-timing-functionアニメーションの速度曲線を指定します.デフォルトはeaseです.3
animation-delayアニメーションがいつ開始されるかを指定します.デフォルトは0です.3
animation-iteration-countは、動画が再生される回数を規定する.デフォルトは1です.3
animation-directionは、アニメーションが次のサイクルで逆方向に再生されるかどうかを規定する.デフォルトは「normal」です.3
animation-play-stateでは、アニメーションが実行中または一時停止しているかどうかを指定します.デフォルトは「running」です.3
animation-fill-modeは、対象アニメーション時間以外の状態を規定する.3
:http://www.w3school.com.cn/css3/css3_animation.asp ：1. @keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}， @keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
2. @keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}3. animation-iteration-count animation-iteration-count:1;-webkit-animation-iteration-count:1;/* SafariとChrome*/
十分な数を設定します.
パラメータを簡潔に書く
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running; animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate; ： <!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
@keyframes passdown {
0% {
bottom: 5px;
}
50% {
bottom: 12px;
}
100% {
bottom: 5px;
}
}
@-webkit-keyframes passdown {
0% {
bottom: 5px;
}
50% {
bottom: 12px;
}
100% {
bottom: 5px;
}
}
.one-slide-8 {
opacity: 1;
transition: all 0.1s ease-in 5.1s;
-webkit-transition: all 0.1s ease-in 5.1s;
}
.pub-passdown {
position: absolute;
width: 18px;
height: 16px;
left: 50%;
margin-left: -9px;
bottom: 10px;
/*transition: all 1s ease-in 20s;*/
animation-name: passdown;
animation-timing-function: ease;
animation-duration: 0.8s;
animation-iteration-count: infinite;
/*-webkit-transition: all 1s ease-in 20s;*/
-webkit-animation-name: passdown;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 0.8s;
-webkit-animation-iteration-count: infinite;
}
</style>
</head>
<body style="background-color:#000000">
<div class="one-slide-8 pub-passdown">
<img src="http://m.yintai.com/event/actives/luyaninvitation/img/arrow-doubleup.png"/>
</div>
</body>
</html>