在CSS動畫期間，你如何讓圖像互相淡入？

我有下面的代碼，有五個圖像的動畫，我希望有一個圖片變成另一個時可以淡入。現在它只是一個接一個的突然的圖像，是否有某種方式逐漸淡入？在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

你的例子爲我在safari中的淡入淡出動畫 – 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動畫期間，你如何讓圖像互相淡入？

回答

相關問題