Problem with pause in keyframe

Asked

Viewed 74 times

3

I made a keyframe that is working perfectly but I am a problem regarding the pause of it so it pauses as soon as I pass the mouse over with an effect :hover however the problem and that it pauses the animation completely for example my image turns away and another appears but if pause it stops in the middle of the process becomes a thing half "Bugada" I would like it to pauseif exactly when my animation is 100% completed there is a way to do this can be done with a :focus for example if in the case of :hover is not possible

follows 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>
      <div class="slide two">
        <img src="http://cssdeck.com/uploads/media/items/1/1hjGftu.png" />
      </div>
      <div class="slide three">
        <img src="http://cssdeck.com/uploads/media/items/4/4OIJyak.png" />
      </div>
      <div class="slide four">
        <img src="http://cssdeck.com/uploads/media/items/6/68BYSto.png" />
      </div>
    </div>
  </div>
</div>

html5 css3
  • 1

    You can take the Hover by Javascript and wait for the event of AnimationEnd (or AnimationIteration) to know when the animation is over. When it’s over you include a class that stops the animation (instead of applying in Hover by css).

  • so friend I did with html and css pure precisely because I do not know how to do this in javascript and I really do not know any of this

No answers

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.