I made a keyframe that is working perfectly because I am a problem with its pause because it pauses as soon as I move the mouse over with a :hover effect but the problem pauses the animation completely by example my image rotates some and another appears but if it pauses it to the middle of the process it gets a half thing "Bugada" I would like it to pause exactly when my animation is 100% complete there is a way to do it can be done with :focus for example if in :hover is not possible
follow my code below:
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
/* Positioning */
#slider #slides_image .slide.one {
left: 400px;
top: 0;
-webkit-animation: fadeOne 16s infinite;
-moz-animation: fadeOne 16s infinite;
animation: fadeOne 16s infinite;
}
#slider #slides_image .slide.two {
left: 900px;
top: 500px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: fadeTwo 16s infinite;
-moz-animation: fadeTwo 16s infinite;
animation: fadeTwo 16s infinite;
}
#slider #slides_image .slide.three {
left: 400px;
top: 1000px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: fadeThree 16s infinite;
-moz-animation: fadeThree 16s infinite;
animation: fadeThree 16s infinite;
}
#slider #slides_image .slide.four {
left: -100px;
top: 500px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-animation: fadeFour 16s infinite;
-moz-animation: fadeFour 16s infinite;
animation: fadeFour 16s infinite;
}
#slider #slides_info .slide_info.one {
left: 400px;
top: 0;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: fadeThree 16s infinite;
-moz-animation: fadeThree 16s infinite;
animation: fadeThree 16s infinite;
}
#slider #slides_info .slide_info.two {
left: 800px;
top: 400px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-animation: fadeFour 16s infinite;
-moz-animation: fadeFour 16s infinite;
animation: fadeFour 16s infinite;
}
#slider #slides_info .slide_info.three {
left: 400px;
bottom: 0;
-webkit-animation: fadeOne 16s infinite;
-moz-animation: fadeOne 16s infinite;
animation: fadeOne 16s infinite;
}
#slider #slides_info .slide_info.four {
left: 0;
top: 400px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: fadeTwo 16s infinite;
-moz-animation: fadeTwo 16s infinite;
animation: fadeTwo 16s infinite;
}
/* Slider Styles */
#slider_wrapper {
position: relative;
margin: 30px auto;
width: 1000px;
height: 400px;
overflow: hidden;
}
#slider {
width: 900px;
height: 300px;
top: 50px;
left: 50px;
position: relative;
}
#slider #slides_image {
position: absolute;
top: 0;
left: 0px;
width: 1300px;
height: 1300px;
-webkit-animation: rotate 16s ease infinite;
-moz-animation: rotate 16s ease infinite;
animation: rotate 16s ease infinite;
}
#slider #slides_info {
position: absolute;
bottom: 0;
left: -400px;
width: 1100px;
height: 1100px;
-webkit-animation: rotate 16s ease infinite;
-moz-animation: rotate 16s ease infinite;
animation: rotate 16s ease infinite;
z-index: 5;
}
#slider #slides_info .slide_info {
width: 300px;
height: 300px;
position: absolute;
}
#slider #slides_image .slide {
width: 500px;
height: 300px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
background: url(http://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/media-pause.png) 50% 50% no-repeat;
}
/* Text Styles */
#slider #slides_info .slide_info h2 {
color: #333;
font-family: "Droid Sans", sans-serif;
margin: 0;
font-weight: normal;
font-size: 24px;
padding-bottom: 5px;
}
#slider #slides_info .slide_info p {
color: #666;
font: 13px/18px Arial, sans-serif;
text-shadow: 1px 1px #eee;
}
/* Button */
#slider a.button {
display: inline-block;
height: 40px;
background: transparent;
padding: 0 15px;
bottom: 0;
left: 0;
font: 13px/40px Arial, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #353637;
color: #333;
text-decoration: none;
cursor: pointer;
margin-top: 40px;
outline: none;
}
#btn-produtos {
border: 2px solid #353637;
padding: 17px;
font-size: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#btn-produtos:hover {
background-color: #353637;
color: #fff;
}
#slider a.button:hover {
background-color: #353637;
color: #fff;
}
#slider:hover #slides_image,
#slider:hover #slides_info,
#slider:hover #slides_image .slide,
#slider:hover #slides_info .slide_info {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
#slider:hover .slide img {
filter: alpha(opacity=50);
opacity: .5;
}
.equipamentos h1 {
text-align: center;
margin-top: 5%;
}
.equipamentos > p {
margin: 0 auto;
width: 45%;
}
/* Animation Keyframes */
@-moz-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
}
20% {
-moz-transform: rotate(0deg);
}
25% {
-moz-transform: rotate(-90deg);
}
45% {
-moz-transform: rotate(-90deg);
}
50% {
-moz-transform: rotate(-180deg);
}
70% {
-moz-transform: rotate(-180deg);
}
75% {
-moz-transform: rotate(-270deg);
}
95% {
-moz-transform: rotate(-270deg);
}
100% {
-moz-transform: rotate(-360deg);
}
}
@-webkit-keyframes "rotate" {
0% {
-webkit-transform: rotate(0deg);
}
20% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(-90deg);
}
45% {
-webkit-transform: rotate(-90deg);
}
50% {
-webkit-transform: rotate(-180deg);
}
70% {
-webkit-transform: rotate(-180deg);
}
75% {
-webkit-transform: rotate(-270deg);
}
95% {
-webkit-transform: rotate(-270deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
@keyframes "rotate" {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(0deg);
}
25% {
transform: rotate(-90deg);
}
45% {
transform: rotate(-90deg);
}
50% {
transform: rotate(-180deg);
}
70% {
transform: rotate(-180deg);
}
75% {
transform: rotate(-270deg);
}
95% {
transform: rotate(-270deg);
}
100% {
transform: rotate(-360deg);
}
}
@-moz-keyframes fadeOne {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
20% {
filter: alpha(opacity=100);
opacity: 1;
}
22% {
filter: alpha(opacity=0);
opacity: 0;
}
30% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@-webkit-keyframes "fadeOne" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
20% {
filter: alpha(opacity=100);
opacity: 1;
}
22% {
filter: alpha(opacity=0);
opacity: 0;
}
30% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@keyframes "fadeOne" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
20% {
filter: alpha(opacity=100);
opacity: 1;
}
22% {
filter: alpha(opacity=0);
opacity: 0;
}
30% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@-moz-keyframes fadeTwo {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
45% {
filter: alpha(opacity=100);
opacity: 1;
}
47% {
filter: alpha(opacity=0);
opacity: 0;
}
55% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@-webkit-keyframes "fadeTwo" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
45% {
filter: alpha(opacity=100);
opacity: 1;
}
47% {
filter: alpha(opacity=0);
opacity: 0;
}
55% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@keyframes "fadeTwo" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
45% {
filter: alpha(opacity=100);
opacity: 1;
}
47% {
filter: alpha(opacity=0);
opacity: 0;
}
55% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@-moz-keyframes fadeThree {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
70% {
filter: alpha(opacity=100);
opacity: 1;
}
72% {
filter: alpha(opacity=0);
opacity: 0;
}
80% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@-webkit-keyframes "fadeThree" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
70% {
filter: alpha(opacity=100);
opacity: 1;
}
72% {
filter: alpha(opacity=0);
opacity: 0;
}
80% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@keyframes "fadeThree" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
70% {
filter: alpha(opacity=100);
opacity: 1;
}
72% {
filter: alpha(opacity=0);
opacity: 0;
}
80% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@-moz-keyframes fadeFour {
0% {
filter: alpha(opacity=0);
opacity: 0;
}
5% {
filter: alpha(opacity=0);
opacity: 0;
}
95% {
filter: alpha(opacity=100);
opacity: 1;
}
97% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=0);
opacity: 0;
}
}
@-webkit-keyframes "fadeFour" {
0% {
filter: alpha(opacity=0);
opacity: 0;
}
5% {
filter: alpha(opacity=0);
opacity: 0;
}
95% {
filter: alpha(opacity=100);
opacity: 1;
}
97% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=0);
opacity: 0;
}
}
@keyframes "fadeFour" {
0% {
filter: alpha(opacity=0);
opacity: 0;
}
5% {
filter: alpha(opacity=0);
opacity: 0;
}
95% {
filter: alpha(opacity=100);
opacity: 1;
}
97% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=0);
opacity: 0;
}
}<div id="slider_wrapper">
<div id="slider">
<div id="slides_info">
<div class="slide_info one">
<h2>Title Three</h2>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a
sit amet mauris. Morbi accumsan ipsum velit.
</p>
<p>
Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
</p>
<a class="button" href="#">Visualizar</a>
<a class="button" href="#showcase">Solicite um orçamento</a>
</div>
<div class="slide_info two">
<h2>Title Four</h2>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a
sit amet mauris. Morbi accumsan ipsum velit.
</p>
<p>
Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
</p>
<a class="button" href="#">Visualizar</a>
<a class="button" href="#showcase">Solicite um orçamento</a>
</div>
<div class="slide_info three">
<h2>Title One</h2>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a
sit amet mauris. Morbi accumsan ipsum velit.
</p>
<p>
Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
</p>
<a class="button" href="#">Visualizar</a>
<a class="button" href="#showcase">Solicite um orçamento</a>
</div>
<div class="slide_info four">
<h2>Title Two</h2>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a
sit amet mauris. Morbi accumsan ipsum velit.
</p>
<p>
Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
</p>
<a class="button" href="#">Visualizar</a>
<a class="button" href="#showcase">Solicite um orçamento</a>
</div>
</div>
<div id="slides_image">
<div class="slide one">
<img src="http://cssdeck.com/uploads/media/items/4/41tAxTu.png"/></div><divclass="slide two">
<img src="http://cssdeck.com/uploads/media/items/1/1hjGftu.png"/></div><divclass="slide three">
<img src="http://cssdeck.com/uploads/media/items/4/4OIJyak.png"/></div><divclass="slide four">
<img src="http://cssdeck.com/uploads/media/items/6/68BYSto.png" />
</div>
</div>
</div>
</div>