在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动画期间，你如何让图像互相淡入？

回答

相关问题