CSS keyframes animation not working in Safari - html

I have made an animation for some elements (images and buttons) to fade in and out using opacity. It works perfectly on all browsers, except on Safari. When I try to run it in Safari, all my elements has 100% opacity without any animation to see..
Example from the button element:
Here is my HTML:
<div id = "ctaButton" class="animate-fadeButton">
</div>
And my CSS:
#ctaButton{
position:absolute;
margin: auto;
left: 26%;
top:70%;
padding:10px; background: #CCC;
background-color: rgba(255,131,15,0.5);
}
#keyframes fadeButton {
0% { opacity:0; }
25% { opacity:0; }
35% { opacity:1; }
90% { opacity:1; }
100% { opacity:0; }
animation-timing-function: linear;
}
#-o-keyframes fadeButton{
0% { opacity:0; }
25% { opacity:0; }
35% { opacity:1; }
90% { opacity:1; }
100% { opacity:0; }
animation-timing-function: linear;
}
#-moz-keyframes fadeButton{
0% { opacity:0; }
25% { opacity:0; }
35% { opacity:1; }
90% { opacity:1; }
100% { opacity:0; }
animation-timing-function: linear;
}
#-webkit-keyframes fadeButton{
0% { opacity:0; }
25% { opacity:0; }
35% { opacity:1; }
90% { opacity:1; }
100% { opacity:0; }
-webkit-animation-timing-function: linear;
}
.animate-fadeButton {
-webkit-animation: fadeButton 15s infinite;
-moz-animation: fadeButton 15s infinite;
-o-animation: fadeButton 15s infinite;
animation: fadeButton 15s infinite;
}


You need to set the animation name and timing before the keyframes animation and not after
CSS
#ctaButton {
position: absolute;
margin: auto;
left: 26%;
top: 70%;
padding: 10px;
background: #CCC;
background-color: rgba(255, 131, 15, 0.5);
}
.animate-fadeButton {
-webkit-animation: fadeButton 15s infinite;
-moz-animation: fadeButton 15s infinite;
-o-animation: fadeButton 15s infinite;
animation: fadeButton 15s infinite;
}
#keyframes fadeButton {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
35% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
animation-timing-function: linear;
}
#-o-keyframes fadeButton {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
35% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
animation-timing-function: linear;
}
#-moz-keyframes fadeButton {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
35% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
animation-timing-function: linear;
}
#-webkit-keyframes fadeButton {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
35% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
-webkit-animation-timing-function: linear;
}

Related

How to hide image after animation using css?

I tried the following code To Fade Out The Image ,
.splash-wrapper {
animation: fadeIn 4s;
-webkit-animation: fadeIn 4s;
-moz-animation: fadeIn 4s;
-o-animation: fadeIn 4s;
-ms-animation: fadeIn 4s;
animation-duration: 3s;
animation-delay: 3.1s;
}
#keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-webkit-keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-ms-keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
.splash-wrapper {
position: fixed;
z-index: 9999;
background-color: #86FF0000;
height: 100vh;
width: 100vw;
display: flex;
flex-flow: column nowrap
justify-content: center;
align-items: center;
animation-duration: 3s;
animation-delay: 3.1s;
}
#keyframes slideOut {
from{margin-left: 0vw;}
to{margin-left: -150vw;}
}
<div class="splash-wrapper">
<img src="https://picsum.photos/200">
</div>
It fades out the image but it's reappearing again and even never fades or becomes invicible. How can i hide the image completely after the animation? .
Should i also mention it's visibility?

Check animation-fill-mode property
.splash-wrapper {
animation-fill-mode: forwards;
}

Try this!
.splash-wrapper {
animation: fadeIn 4s;
-webkit-animation: fadeIn 4s;
-moz-animation: fadeIn 4s;
-o-animation: fadeIn 4s;
-ms-animation: fadeIn 4s;
position: fixed;
z-index: 9999;
background-color: #86FF0000;
height: 100vh;
width: 100vw;
display: flex;
flex-flow: column nowrap
justify-content: center;
align-items: center;
animation-duration: 3s;
animation-delay: 3.1s;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-webkit-keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-ms-keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes slideOut {
from{margin-left: 0vw;}
to{margin-left: -150vw;}
}
<div class="splash-wrapper">
<img src="https://picsum.photos/200">
</div>
Thanks and best regards!

You can solve this with animation-fill-mode: forwards or you add it directly to your animation call:
animation: fadeIn 4s forwards;
Working example:
(I removed the unused #keyframes slideOut, the double CSS-code and the animation-duration, because you defined the duration already directly in the animation call)
.splash-wrapper {
position: fixed;
z-index: 9999;
background-color: #86FF0000;
height: 100vh;
width: 100vw;
display: flex;
flex-flow: column nowrap
justify-content: center;
align-items: center;
animation: fadeIn 4s forwards;
-webkit-animation: fadeIn 4s forwards;
-moz-animation: fadeIn 4s forwards;
-o-animation: fadeIn 4s forwards;
-ms-animation: fadeIn 4s forwards;
animation-delay: 3.1s;
}
#keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-webkit-keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-ms-keyframes fadeIn {
0% { opacity: 1; }
100% { opacity: 0; }
}
<div class="splash-wrapper">
<img src="https://picsum.photos/200">
</div>
If you want to disappear the .splash-wrapper instead of just getting invisible, you can animate the height too:
#keyframes fadeIn {
0% { opacity: 1; height: 100vh; }
75% { opacity: 0; height: 100vh; }
100% { opacity: 0; height: 0vh; }
}
(75% ist just an example - you could also take 99% o.s.)
Working example:
.splash-wrapper {
position: fixed;
z-index: 9999;
background-color: #86FF0000;
height: 100vh;
width: 100vw;
display: flex;
flex-flow: column nowrap
justify-content: center;
align-items: center;
animation: fadeIn 4s forwards;
-webkit-animation: fadeIn 4s forwards;
-moz-animation: fadeIn 4s forwards;
-o-animation: fadeIn 4s forwards;
-ms-animation: fadeIn 4s forwards;
animation-delay: 3.1s;
}
#keyframes fadeIn {
0% { opacity: 1; height: 100vh; }
75% { opacity: 0; height: 100vh; }
100% { opacity: 0; height: 0; }
}
#-moz-keyframes fadeIn {
0% { opacity: 1; height: 100vh; }
75% { opacity: 0; height: 100vh; }
100% { opacity: 0; height: 0; }
}
#-webkit-keyframes fadeIn {
0% { opacity: 1; height: 100vh; }
75% { opacity: 0; height: 100vh; }
100% { opacity: 0; height: 0; }
}
#-o-keyframes fadeIn {
0% { opacity: 1; height: 100vh; }
75% { opacity: 0; height: 100vh; }
100% { opacity: 0; height: 0; }
}
#-ms-keyframes fadeIn {
0% { opacity: 1; height: 100vh; }
75% { opacity: 0; height: 100vh; }
100% { opacity: 0; height: 0; }
}
<div class="splash-wrapper">
<img src="https://picsum.photos/200">
</div>
If manipulating the height is still not enough and you really want to hide the element after the animation, you have to use Javascript. You could use the animate() function, the setTimeout() function for the delay and a promise ( then() ) for setting the display property:
setTimeout(function() {
splash_wrapper.animate(key_frames, timing_options).finished.then(function() {
splash_wrapper.style.display = 'none';
});
}, 3100);
Working example:
const splash_wrapper = document.querySelector(".splash-wrapper");
const key_frames = [
{ opacity: '1'},
{ opacity: '0'}
];
const timing_options = {
duration: 4000,
iterations: 1,
}
setTimeout(function() {
splash_wrapper.animate(key_frames, timing_options).finished.then(function() {
splash_wrapper.style.display = 'none';
});
}, 3100);
.splash-wrapper {
position: fixed;
z-index: 9999;
background-color: #86FF0000;
height: 100vh;
width: 100vw;
display: flex;
flex-flow: column nowrap
justify-content: center;
align-items: center;
}
<div class="splash-wrapper">
<img src="https://picsum.photos/200">
</div>

CSS animation delay is not working on fadeIn effect. The animation begins immediately regardless of what i set the delay to

Basically what the title says. I am trying to get this div to appear about 4s after page load, but it is instead appearing straight away. It is doing the fade animation (which lasts 2 seconds) but this animation is beginning straight away.
Here is the HTML:
.abouttext {
text-align: center;
/*color: white; removed for snippet demo*/
width: 80%;
margin-left: 10%;
margin-right: 10%;
float: right;
}
#aboutone {
margin-top: 10px;
animation: fadeIn ease 2s;
animation-delay: 5s;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;
z-index: 0;
opacity: 0;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="abouttext" id="aboutone">
<p>hello</p>
</div>
Any help at all on this would be great. I have googled it for hours but can't seem to work out why it is not working.
p.s I am using this on Chrome.

As you're using prefixes for different browsers and they are after the original animation, browsers will use their prefixed animation (e.g. browsers using -webkit will expect -webkit-animation-delay).
You could add animation-duration with all separate prefixes or just use animation-delay in animation all together:
#aboutone {
text-align: center;
margin-top: 10px;
z-index: 0;
opacity: 0;
/* animation: duration timing-function delay name */
animation: 2s ease 5s fadeIn;
-webkit-animation: 2s ease 5s fadeIn;
-moz-animation: 2s ease 5s fadeIn;
-o-animation: 2s ease 5s fadeIn;
-ms-animation: 2s ease 5s fadeIn;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-ms-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
<div class="abouttext" id="aboutone">
<p>hello</p>
</div>
If you want the animation to start (with delay) after the whole body is loaded and not right when user loads the page, you can use onload event listener on the body (As this answer to your question says)

You can use dom call back with a function in Javascript to wait until the document is loaded, then add the style to the element.
(function() {
let target = document.querySelector('#aboutone');
target.style.cssText = "animationDelay: 5s; webkit-animation: fadeIn ease 2s; -moz-animation: fadeIn ease 2s; -o-animation: fadeIn ease 2s; -ms-animation: fadeIn ease 2s;";
});
.abouttext {
text-align: center;
/*color: white; removed for snippet demo*/
width: 80%;
margin-left: 10%;
margin-right: 10%;
float: right;
}
#aboutone {
margin-top: 10px;
animation: fadeIn ease 2s;
z-index: 0;
opacity: 0;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="abouttext" id="aboutone">
<p>hello</p>
</div>
As Vepthy suggested in comments... you could also add an event listener for the load. The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
window.addEventListener('load', (event) => {
let target = document.querySelector('#aboutone');
target.style.cssText = "animationDelay: 5s; webkit-animation: fadeIn ease 2s; -moz-animation: fadeIn ease 2s; -o-animation: fadeIn ease 2s; -ms-animation: fadeIn ease 2s;";
});
.abouttext {
text-align: center;
/*color: white; removed for snippet demo*/
width: 80%;
margin-left: 10%;
margin-right: 10%;
float: right;
}
#aboutone {
margin-top: 10px;
animation: fadeIn ease 2s;
z-index: 0;
opacity: 0;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="abouttext" id="aboutone">
<p>hello</p>
</div>

how to multible div fadeout fadein loop animation

I stuck in keyframes animations.
I have a fadein fadeout animation css. Code work nice with 3 div but when I add + 1 div and animations, css loop is broken. I want them to work synchronously but how ?
There is code :
#-webkit-keyframes fadeA {
0% {
opacity: 0
}
13.2%,19.8% {
opacity: 1;
z-index: 5
}
100%,33% {
opacity: 0
}
}
#-webkit-keyframes fadeB {
0%,33% {
opacity: 0
}
46.2%,52.8% {
opacity: 1;
z-index: 5
}
100%,66% {
opacity: 0
}
}
#-webkit-keyframes fadeC {
0%,66% {
opacity: 0
}
79.2%,85.8% {
opacity: 1;
z-index: 5
}
100% {
opacity: 0
}
}
#-webkit-keyframes fadeD {
0%,66% {
opacity: 0
}
79.2%,85.8% {
opacity: 1;
z-index: 5
}
100% {
opacity: 0
}
}
#-moz-keyframes fadeA {
0% {
opacity: 0
}
13.2%,19.8% {
opacity: 1;
z-index: 5
}
100%,33% {
opacity: 0
}
}
#-moz-keyframes fadeB {
0%,33% {
opacity: 0
}
46.2%,52.8% {
opacity: 1;
z-index: 5
}
100%,66% {
opacity: 0
}
}
#-moz-keyframes fadeC {
0%,66% {
opacity: 0
}
79.2%,85.8% {
opacity: 1;
z-index: 5
}
100% {
opacity: 0
}
}
#-moz-keyframes fadeD {
0%,66% {
opacity: 0
}
79.2%,85.8% {
opacity: 1;
z-index: 5
}
100% {
opacity: 0
}
}
#keyframes fadeA {
0% {
opacity: 0
}
13.2%,19.8% {
opacity: 1;
z-index: 5
}
100%,33% {
opacity: 0
}
}
#keyframes fadeB {
0%,33% {
opacity: 0
}
46.2%,52.8% {
opacity: 1;
z-index: 5
}
100%,66% {
opacity: 0
}
}
#keyframes fadeC {
0%,66% {
opacity: 0
}
79.2%,85.8% {
opacity: 1;
z-index: 5
}
100% {
opacity: 0
}
}
#keyframes fadeD {
0%,66% {
opacity: 0
}
79.2%,85.8% {
opacity: 1;
z-index: 5
}
100% {
opacity: 0
}
}
.anm1{
width:100%;
position: absolute;
top: 3px;
left: 0;
opacity: 0;
-webkit-animation: fadeA ease 15s infinite;
-moz-animation: fadeA ease 15s infinite;
animation: fadeA ease 15s infinite
}
.anm2 {
width: 100%;
position: absolute;
top: 3px;
left: 0;
opacity: 0;
-webkit-animation: fadeB ease 15s infinite;
-moz-animation: fadeB ease 15s infinite;
animation: fadeB ease 15s infinite
}
.anm3 {
width: 100%;
position: absolute;
top: 3px;
left: 0;
opacity: 0;
-webkit-animation: fadeC ease 15s infinite;
-moz-animation: fadeC ease 15s infinite;
animation: fadeC ease 15s infinite
}
.anm4 {
width: 100%;
position: absolute;
top: 3px;
left: 0;
opacity: 0;
-webkit-animation: fadeD ease 15s infinite;
-moz-animation: fadeD ease 15s infinite;
animation: fadeD ease 15s infinite
}
<div>
<div class="anm1">FIRST TEXT </div>
<div class="anm2">SECOND TEXT</div>
<div class="anm2">THIRD TEXT</div>
<div class="anm2">FOURth TEXT</div>
</div>

You defined class anm2 to last three div's. I think it could be a reason of animation crash along with some grammar mistakes in css-rules.
Here is a solution of animate. Animation used with one keyframe due to different animation-delay for different div-s
#-webkit-keyframes fadeA {
0% {opacity: 0}
12.5% { opacity: 1; }
25% { opacity: 0; }
100% { opacity: 0 }
}
#keyframes fadeA {
0% {opacity: 0}
12.5% { opacity: 1; }
25% { opacity: 0; }
100% { opacity: 0 }
}
[class^="anm"] {
display: inline-block;
position: absolute;
top: 3px;
left: 0;
opacity: 0;
-webkit-animation: fadeA ease 12s;
-moz-animation: fadeA ease 12s ;
animation: fadeA ease 12s ;
}
.anm1{
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.anm2 {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.anm3 {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.anm4 {
-webkit-animation-delay: 9s;
animation-delay: 9s;
}
<div>
<div class="anm1">FIRST TEXT </div>
<div class="anm2">SECOND TEXT</div>
<div class="anm3">THIRD TEXT</div>
<div class="anm4">FOURth TEXT</div>
</div>

Css3 Animation looping in webkit-animation

I have a problem with css3 animation effect.I want to know how to continue looping without go to start place.
As a example. when clouds are moving, the webkit-animation time over, it come to first step and start animate again.So it not nice because cloud go to back and again start moving (watch 7 seconds), i want to continue animation without cloud goes to start.
DEMO Here
CSS3
.sky {
height:638px;
background:#007fd5;
position:relative;
overflow:hidden;
-webkit-animation:sky_background 50s ease-out infinite;
-moz-animation:sky_background 50s ease-out infinite;
-o-animation:sky_background 50s ease-out infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
.moon {
background:url("http://montanaflynn.me/lab/css-clouds/images/moon.png");
position:absolute;
left:0;
height:85%;
width:300%;
-webkit-animation:moon 50s linear infinite;
-moz-animation:moon 50s linear infinite;
-o-animation:moon 50s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
.clouds_one {
margin-top: -55px;
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_one.png");
position:absolute;
left:0;
top:0;
height:80%;
width:400%;
-webkit-animation:cloud_one 5s linear infinite;
-moz-animation:cloud_one 5s linear infinite;
-o-animation:cloud_one 5s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
.clouds_two {
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_two.png");
position:absolute;
left:0;
top:0;
height:80%;
width:400%;
-webkit-animation:cloud_two 7s linear infinite;
-moz-animation:cloud_two 7s linear infinite;
-o-animation:cloud_two 7s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
.clouds_three {
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
position:absolute;
left:0;
top:0;
height:75%;
width:400%;
-webkit-animation:cloud_three 10s linear infinite;
-moz-animation:cloud_three 10s linear infinite;
-o-animation:cloud_three 10s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
#-webkit-keyframes sky_background {
0% {
background:#007fd5;
color:#007fd5
}
50% {
background:#007fd5;
color:#007fd5
}
100% {
background:#007fd5;
color:#007fd5
}
}
#-webkit-keyframes moon {
0% {
opacity: 0;
left:-200%
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left:0%
bottom:250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom:500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
#-webkit-keyframes cloud_one {
0% {
left:0
}
100% {
left:-200%
}
}
#-webkit-keyframes cloud_two {
0% {
left:0
}
100% {
left:-200%
}
}
#-webkit-keyframes cloud_three {
0% {
left:0
}
100% {
left:-200%
}
}
#-moz-keyframes sky_background {
0% {
background:#007fd5;
color:#007fd5
}
50% {
background:#000;
color:#a3d9ff
}
100% {
background:#007fd5;
color:#007fd5
}
}
#-moz-keyframes moon {
0% {
opacity: 0;
left:-200%
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left:0%
bottom:250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom:500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
#-moz-keyframes cloud_one {
0% {
left:0
}
100% {
left:-200%
}
}
#-moz-keyframes cloud_two {
0% {
left:0
}
100% {
left:-200%
}
}
#-moz-keyframes cloud_three {
0% {
left:0
}
100% {
left:-200%
}
}
HTML
<div class="sky">
<div class="clouds_one"></div>
<div class="clouds_two"></div>
<div class="clouds_three"></div>
</div>

CSS fading animation delay timing

I'm trying to create a slideshow effect with css3 I have three images which I need to fade into each one another. - each transition needs to last for 3 seconds.
1st image shows for 3seconds then fades to 2nd and same to third
I'm unsure how to work out the percentage for the keyframes.
Codepen http://codepen.io/anon/pen/MYmPYp
#-webkit-keyframes cf4FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 1;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes cf4FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 1;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes cf4FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 1;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes cf4FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 1;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.team-img {
position: relative;
height: 329px;
width: 450px;
}
.team-img img {
position: absolute;
left: 0;
z-index: 0;
-webkit-animation-name: cf4FadeInOut;
-moz-animation-name: cf4FadeInOut;
-ms-animation-name: cf4FadeInOut;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
}
.team-img img:nth-of-type(1) {
-webkit-animation-name: cf4FadeInOut;
-moz-animation-name: cf4FadeInOut;
-ms-animation-name: cf4FadeInOut;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
}
.team-img img:nth-of-type(2) {
-webkit-animation-name: cf4FadeInOut;
-moz-animation-name: cf4FadeInOut;
-ms-animation-name: cf4FadeInOut;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
}
.team-img img:nth-of-type(3) {
-webkit-animation-name: cf4FadeInOut;
-moz-animation-name: cf4FadeInOut;
-ms-animation-name: cf4FadeInOut;
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
}
<div class="team-img">
<img width="200px" height="200px" src="http://blackdogballroom.co.uk/nws/wp-content/uploads/sites/2/2014/11/BDB-290212-Img-048.jpg">
<img width="200px" height="200px" src="http://3.bp.blogspot.com/-I2TYXJ3lDYw/UFsjvkedaXI/AAAAAAAAE-w/7EYzTeZMpsc/s1600/00Halloween+Spooks.JPG">
<img width="200px" height="200px" src="http://blog.lafraise.com/fr/wp-content/uploads/2013/11/Free-hug-zoneinfinite.jpg">
</div>
I've been racking my brain for a few hours, slowly losing the will. I've googled effortlessly.
Thanks,
Dan

You need to define three different #keyframes to achieve this.
#-webkit-keyframes two {
0% { opacity: 0; }
8.3% { opacity: 0; }
16.6% { opacity: 0; }
24.9% { opacity: 0; }
33.2% { opacity: 1; }
41.5% { opacity: 1; }
49.5% { opacity: 1; }
58.1% { opacity: 1; }
66.4% { opacity: 0; }
74.7% { opacity: 0; }
83% { opacity: 0; }
91.3% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes two {
0% { opacity: 0; }
8.3% { opacity: 0; }
16.6% { opacity: 0; }
24.9% { opacity: 0; }
33.2% { opacity: 1; }
41.5% { opacity: 1; }
49.5% { opacity: 1; }
58.1% { opacity: 1; }
66.4% { opacity: 0; }
74.7% { opacity: 0; }
83% { opacity: 0; }
91.3% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes three {
0% { opacity: 0; }
8.3% { opacity: 0; }
16.6% { opacity: 0; }
24.9% { opacity: 0; }
33.2% { opacity: 0; }
41.5% { opacity: 0; }
49.5% { opacity: 0; }
58.1% { opacity: 0; }
66.4% { opacity: 1; }
74.7% { opacity: 1; }
83% { opacity: 1; }
91.3% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes three {
0% { opacity: 0; }
8.3% { opacity: 0; }
16.6% { opacity: 0; }
24.9% { opacity: 0; }
33.2% { opacity: 0; }
41.5% { opacity: 0; }
49.5% { opacity: 0; }
58.1% { opacity: 0; }
66.4% { opacity: 1; }
74.7% { opacity: 1; }
83% { opacity: 1; }
91.3% { opacity: 1; }
100% { opacity: 0; }
}
.team-img {
position: relative;
height: 329px;
width: 450px;
}
.team-img img {
position: absolute;
left: 0;
z-index: 0;
}
.team-img img:nth-of-type(2) {
-webkit-animation: two 11s ease-in-out infinite forwards;
animation: two 11s ease-in-out infinite forwards;
}
.team-img img:nth-of-type(3) {
-webkit-animation: three 11s ease-in-out infinite forwards;
animation: three 11s ease-in-out infinite forwards;
}
<div class="team-img">
<img width="200px" height="200px" src="http://blackdogballroom.co.uk/nws/wp-content/uploads/sites/2/2014/11/BDB-290212-Img-048.jpg">
<img width="200px" height="200px" src="http://3.bp.blogspot.com/-I2TYXJ3lDYw/UFsjvkedaXI/AAAAAAAAE-w/7EYzTeZMpsc/s1600/00Halloween+Spooks.JPG">
<img width="200px" height="200px" src="http://blog.lafraise.com/fr/wp-content/uploads/2013/11/Free-hug-zoneinfinite.jpg">
</div>

You don't need to animate the first image, only the second and third. It makes a code much shorter:
.team-img {
position: relative;
height: 329px;
width: 450px;
}
.team-img img {
position: absolute;
left: 0;
top: 0;
}
.team-img img:nth-of-type(2) {
opacity: 0;
-webkit-animation: fading2 ease 14s infinite;
animation: fading2 ease 14s infinite;
}
.team-img img:nth-of-type(3) {
opacity: 0;
-webkit-animation: fading3 ease 14s infinite;
animation: fading3 ease 14s infinite;
}
#-webkit-keyframes fading2 {
0%: { opacity: 0;}
21% { opacity: 0;}
35% { opacity: 1;}
93% { opacity: 1;}
100% { opacity: 0;}
}
#keyframes fading2 {
0%: { opacity: 0;}
21% { opacity: 0;}
35% { opacity: 1;}
93% { opacity: 1;}
100% { opacity: 0;}
}
#-webkit-keyframes fading3 {
0%: { opacity: 0;}
56% { opacity: 0;}
70% { opacity: 1;}
93% { opacity: 1;}
100% { opacity: 0;}
}
#keyframes fading3 {
0%: { opacity: 0;}
56% { opacity: 0;}
70% { opacity: 1;}
93% { opacity: 1;}
100% { opacity: 0;}
}
<div class="team-img">
<img width="200px" height="200px" src="http://blackdogballroom.co.uk/nws/wp-content/uploads/sites/2/2014/11/BDB-290212-Img-048.jpg">
<img width="200px" height="200px" src="http://3.bp.blogspot.com/-I2TYXJ3lDYw/UFsjvkedaXI/AAAAAAAAE-w/7EYzTeZMpsc/s1600/00Halloween+Spooks.JPG">
<img width="200px" height="200px" src="http://blog.lafraise.com/fr/wp-content/uploads/2013/11/Free-hug-zoneinfinite.jpg">
</div>