css3アニメーションを元の状態に戻し続ける

Question

CSS 3アニメーションで遊んでいますが、何らかの理由ですべてのアニメーションが実行後に元の状態に戻ります。

この場合、アニメーション後に画像をscale(1)に残しておき、imgアニメーションの後にolyと表示されたテキストを残しておきます。あなたのアニメーションにルール-webkit-animation-fill-mode: forwards;を追加する必要が

.expanding-spinning { 
    -webkit-transform: scale(.4); 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
    animation-duration: 500ms; 
} 

.expanding-spinning { 
    -webkit-animation: spin2 1.4s ease-in-out alternate; 
    animation: spin2 1.4s ease-in-out alternate; 
    -webkit-animation-delay: 2s; 
    animation-delay: 2s; 
} 

@-webkit-keyframes spin2 { 
    0% { -webkit-transform: rotate(0deg) scale(.4);} 
    100% { -webkit-transform: rotate(360deg) scale(1);} 
} 
@-keyframes spin2 { 
    0% { transform: rotate(0deg) scale(.4);} 
    100% { transform: rotate(360deg) scale(1);} 
} 

@-webkit-keyframes fadeInFromNone { 
    0% { 
    display:none; 
    opacity: 0; 
    } 

    100% { 
    display: block; 
    opacity: 1; 
    } 
} 

.slogan { 
    display: block; 
    opacity: 1; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-name: fadeInFromNone; 
    -webkit-animation-delay: 3.5s; 
} 

Fiddle code

Answer 1

。 visibilityプロパティをアニメーション化する代わりに、display財産の

FIDDLE

.expanding-spinning { 
    -webkit-animation: spin2 1.4s ease-in-out; 
    -moz-animation: spin2 1.4s linear normal; 
    -o-animation: spin2 1.4s linear; 
    -ms-animation: spin2 1.4s linear; 
    animation: spin2 1.4s ease-in-out alternate; 
    -webkit-animation-delay: 2s; 
    animation-delay: 2s; 
    -webkit-animation-fill-mode: forwards; /* <--- */ 
} 
@-webkit-keyframes fadeInFromNone { 
    0% { 
     visibility:hidden; 
     opacity: 0; 
    } 

    100% { 
     visibility: visible; 
     opacity: 1; 
    } 
} 

.slogan { 
    visibility:hidden; 
    opacity: 1; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-name: fadeInFromNone; 
    -webkit-animation-delay: 3.4s; 
    -webkit-animation-fill-mode: forwards; /* <--- */ 
} 

すべてのアニメーションプロパティ

の素敵な説明のためのthis articleを参照してください：テキストアニメーションについても

、塗りつぶしモード。前方に設定した場合は、最後のキーフレームアニメーションの 最後に残る、