web-dev-qa-db-ja.com

単純なCSSアニメーションループ–テキストのフェードインとフェードアウト

Javascriptがなければ、テキストを無限にフェードインおよびフェードアウトする単純なループCSSアニメーションクラスを作成したいと思います。私はCSSアニメーションについてあまり知らないので、まだ理解していませんが、ここまでの結果を以下に示します。

@keyframes flickerAnimation { /* flame pulses */
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}
csscss3animation
47
ac360

キングキングが言ったように、ブラウザ固有のプレフィックスを追加する必要があります。これはほとんどのブラウザをカバーするはずです：

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}
<div class="animate-flicker">Loading...</div>
101
touko

より簡単なバリエーションを探して、私はこれを見つけました：

本当にスマートです。ChromeとFirefoxの両方で機能しましたが、他のブラウザーのバリエーションも追加したいと思うかもしれません。

デモとクレジット=> http://codepen.io/Ahrengot/pen/bKdLC

@keyframes fadeIn { 
  from { opacity: 0; } 
}

.animate-flicker {
    animation: fadeIn 1s infinite alternate;
}
<h2 class="animate-flicker">Jump in the hole!</h2>
46
azerafati

5つの要素が4秒ごとにフェードするなど、複数の要素を連続してフェードイン/フェードアウトするには、

1- animation-durationが[4s（各要素の期間）*5に等しい要素ごとに一意のアニメーションを作成する（要素の数）]= 20s

animation-name: anim1 , anim2, anim3 ... 
animation-duration : 20s, 20s, 20s ...

2-各要素のアニメーションキーフレームを取得します。

100% (keyframes percentage) / 5 (elements) = 20% (frame for each element)

3-各アニメーションの開始点と終了点を定義します。

各アニメーションのフレーム長は20％で、@ keyframesの割合は常に0％から始まるため、最初のアニメーションは0％から始まり、フレーム（20％）で終わり、次にアニメーションは前のアニメーションの終了点から始まり、フレームに到達すると終了します（+ 20％）、

@keyframes animation1 { 0% {}, 20% {}}
@keyframes animation2 { 20% {}, 40% {}}
@keyframes animation3 { 40% {}, 60% {}}
and so on

ここで、各アニメーションを0から1の不透明度からフェードインし、1から0にフェードアウトする必要があります。

したがって、完全な不透明度（1）を処理するために、開始点と終了点の前に各アニメーションに別の2ポイント（ステップ）を追加します

enter image description here

http://codepen.io/El-Oz/pen/WwPPZQ

.slide1 {
    animation: fadeInOut1 24s ease reverse forwards infinite
}

.slide2 {
    animation: fadeInOut2 24s ease reverse forwards infinite
}

.slide3 {
    animation: fadeInOut3 24s ease reverse forwards infinite
}

.slide4 {
    animation: fadeInOut4 24s ease reverse forwards infinite
}

.slide5 {
    animation: fadeInOut5 24s ease reverse forwards infinite
}

.slide6 {
    animation: fadeInOut6 24s ease reverse forwards infinite
}

@keyframes fadeInOut1 {
    0% { opacity: 0 }
    1% { opacity: 1 }
    14% {opacity: 1 }
    16% { opacity: 0 }
}

@keyframes fadeInOut2 {
    0% { opacity: 0 }
    14% {opacity: 0 }
    16% { opacity: 1 }
    30% { opacity: 1 }
    33% { opacity: 0 }
}

@keyframes fadeInOut3 {
    0% { opacity: 0 }
    30% {opacity: 0 }
    33% {opacity: 1 }
    46% { opacity: 1 }
    48% { opacity: 0 }
}

@keyframes fadeInOut4 {
    0% { opacity: 0 }
    46% { opacity: 0 }
    48% { opacity: 1 }
    64% { opacity: 1 }
    65% { opacity: 0 }
}

@keyframes fadeInOut5 {
    0% { opacity: 0 }
    64% { opacity: 0 }
    66% { opacity: 1 }
    80% { opacity: 1 }
    83% { opacity: 0 }
}

@keyframes fadeInOut6 {
    80% { opacity: 0 }
    83% { opacity: 1 }
    99% { opacity: 1 }
    100% { opacity: 0 }
}
3
user6213434

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

それは実際にはブラウザの問題です... -webkit-をchromeに使用してください

0
jBear Graphics