CSSアニメーションプロパティはアニメート後も残る


92

CSSアニメーションプロパティを完了後も保持しようとしていますが、これは可能ですか?

これは私が達成しようとしていることです...

要素は、ユーザーがページに到達すると非表示になり、3秒後(または何でも)、フェードインし、アニメーションが完了するとそこにとどまります。

ここにフィドルの試みがあります... http://jsfiddle.net/GZx6F/

保存用のコードは次のとおりです...

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

私はjQueryでこれを行う方法を知っています...それはこのようになるでしょう...

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>

されてW3Schoolsのは時代遅れ?ChromeとFireFoxは代替手段しかサポートしていないという。
iambriansreed

5
@iambriansreed:いつもそうだと思います:)
BoltClock

4
@iambriansreedは、w3schoolsの検索結果をクリックすることすらしません。誤って操作した場合は、モニターから目をそらして、マウスの戻るボタンを押してください。
doug65536 2013年

回答:


162

animation-fill-modeCSS3プロパティを探していると思います

https://developer.mozilla.org/en/CSS/animation-fill-mode

animation-fill-mode CSSプロパティは、CSSアニメーションが実行の前後にターゲットにスタイルを適用する方法を指定します。

あなたの目的のために設定してみてください

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

転送値の設定«ターゲットは、実行中に遭遇した最後のキーフレームによって設定された計算値を保持します»


1
ファブリツィオに感謝します。それはすばらしいことです。私はその答えを受け入れます。奇妙なことが1つだけ起こっています。何か知っているかどうか疑問に思っています-iOS(他には何もテストしていません)では、スクロールするたびにイーズインへのカウントダウンが一時停止します。フェードインしません。しかし、スクロールを停止すると、3のカウントダウンが始まります。これはデフォルトのiOSの動作ですか?ありがとう
SparrwHawk 2012年

なんて素晴らしいソリューションでしょう。
Lalnuntluanga Chhakchhuak

16

@Fabrizio Calderan回答に加えて、プロパティを直接に適用することもできると言わなければなりません。したがって、以下も機能するはずです。animation-fill-modeforwardsanimation

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>


0

似たようなことが起こりました。アニメーション化していた要素に関連して、position:relativeを追加しました。


0

要素をアニメーション化し、アニメーションの完了時に要素を維持する方法:

// Beggin
#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}
<div id="box"></div>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.