CSSアニメーション中に、どのようにイメージを互いにフェードインさせますか？

私は5つの画像のアニメーションを持っている次のコードを持っています。私は、1つの画像が別の画像に変化するとフェードインしたいと思っています。今のように、もう一方のイメージの後には突然のイメージがあります。徐々にフェードインする方法はありますか？CSSアニメーション中に、どのようにイメージを互いにフェードインさせますか？

#MTG 
 
{ 
 
    width:225px; 
 
    height:300px; 
 
    border:solid black 2px; 
 
    position:fixed; 
 
    animation-name:MTG; 
 
    animation-duration:15s; 
 
    animation-delay:10s; 
 
    animation-timing-function:linear; 
 
    animation-iteration-count:infinite; 
 
    animation-direction:alternate; 
 
    transition-duration:5s; 
 
} 
 
@keyframes MTG 
 
{ 
 
    0% 
 
    { 
 
     background-image: url(http://lorempixel.com/225/300/nature/1/) 
 
    } 
 
    25% 
 
    { 
 
     background-image:url(http://lorempixel.com/225/300/nature/2/) 
 
    } 
 
    50% 
 
    { 
 
     background-image:url(http://lorempixel.com/225/300/nature/3/) 
 
    } 
 
    75% 
 
    { 
 
     background-image:url(http://lorempixel.com/225/300/nature/4/) 
 
    } 
 
    100% 
 
    { 
 
     background-image:url(http://lorempixel.com/225/300/nature/5/) 
 
    } 
 
}

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>MTG Animation</title> 
 
    <link href="StyleSheet1.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <h1>MTG Card animation.</h1> 
 
    <div id="MTG"> 
 
    </div> 
 

 
</body> 
 
</html>

出典

2017-08-29 Neil Meyer

一つの方法は...親とその内部に複数の画像を持っていると –

http://css3.bradshawenterprises.com/cfimg/#cf4a画像の不透明度をアニメーションであります – caramba

あなたの例は、私のためにサファリのフェードトランジションでアニメ化します – godblessstrawberry

私は割合で遊んするお手伝いをすると思います。あなたはこれを達成することができます

#MTG 
 
{ 
 
    width:225px; 
 
    height:300px; 
 
    border:solid black 2px; 
 
    position:fixed; 
 
    animation-name:MTG; 
 
    animation-duration:15s; 
 
    /*animation-delay:10s;*/ 
 
    animation-timing-function:linear; 
 
    animation-iteration-count:infinite; 
 
    animation-direction:normal; 
 
    /* transition-duration:5s;*/ 
 
} 
 
@keyframes MTG 
 
{ 
 
    0%, 15% 
 
    { 
 
     background-image:url(http://lorempixel.com/225/300/nature/1/) 
 
    } 
 
    20%, 35% 
 
    { 
 
     background-image:url(http://lorempixel.com/225/300/nature/2/) 
 
    } 
 
    40%, 55% 
 
    { 
 
     background-image:url(http://lorempixel.com/225/300/nature/3/) 
 
    } 
 
    60%, 75% 
 
    { 
 
     background-image:url(http://lorempixel.com/225/300/nature/4/) 
 
    } 
 
    80%, 95%{ 
 
     background-image:url(http://lorempixel.com/225/300/nature/5/) 
 
    } 
 
    100%{ 
 
     background-image:url(http://lorempixel.com/225/300/nature/1/) 
 
    } 
 
}

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>MTG Animation</title> 
 
    <link href="StyleSheet1.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <h1>MTG Card animation.</h1> 
 
    <div id="MTG"> 
 
    </div> 
 

 
</body> 
 
</html>

出典

2017-08-29 11:18:35

CSSアニメーション中に、どのようにイメージを互いにフェードインさせますか？

答えて

関連する問題