完了後に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>
animation-fill-mode
CSS3プロパティを探していると思います
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;
}
forwards値の設定"ターゲットは、実行中に検出された最後のキーフレームによって設定された計算値を保持します"
@ Fabrizio Calderan の answer に加えて、animation-fill-mode
プロパティforwards
からanimation
に直接。したがって、以下も機能するはずです。
@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>
要素をアニメーション化し、アニメーションの完了時に要素を維持する方法:
// 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>
似たようなことが起こった。アニメーション化され、それを修正してくれた要素に対して、position:relativeを追加しました。