CODEWITHSUNDEEP
csssafaricss-animationssafari-web-inspector
user3772794
user3772794

Reputation: 21

Safari refreshes the page on setting 'animation-play-state' to paused;

Something weird is happening here... I am trying to stop my CSS animation on hover and it's work great on: Chrome | Firefox | IE but not in Safari (all my browsers are latest versions) so Safari refreshes the whole page on hover!! Whaaaat? How???

Thank you for your attention.

Here is the DEMO

.more-arrow-maindiv {
  width: 175px;
  height: auto;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.home-arrow-position {
  position: absolute;
  top: 95%;
}

.more-arrow-maindiv:hover .more-arrow-title {
  opacity: 1;
  -webkit-transition: opacity .4s ease-in-out;
  -moz-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out;
}

.hp-more-arrow-title {
  background-color: #ffffff;
  padding: 5px;
  margin-top: -45px !important;
  cursor: pointer !important;
}

.more-arrow-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  color: #787f88;
  position: absolute;
  margin: 0 auto;
  right: 0;
  left: 0;
  margin-top: -30px;
  opacity: 0;
  text-align: center;
  cursor: default;
  -webkit-transition: opacity .4s ease-in-out;
  -moz-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out;
}

.more-arrow {
  background-position: top center;
  background-color: transparent;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ffffff;
  /*    padding: 5px;*/
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  cursor: pointer;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -ms-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
}

.more-arrow-hp {
  background: url(../images/arrow_down_white_hp.png) no-repeat !important;
}


/* -------------------------------- Arrow blinking animation ------------------------------------------ */

.blink_eff:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

.blink_eff {
  -webkit-animation-play-state: running;
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-play-state: running;
  -moz-animation-name: blinker;
  -moz-animation-duration: 3s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-play-state: running;
  -o-animation-name: blinker;
  -o-animation-duration: 3s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-play-state: running;
  animation-name: blinker;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@-moz-keyframes blinker {
  0% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
  }
  50% {
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
  }
  100% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
  }
}

@-webkit-keyframes blinker {
  0% {
    opacity: 0.5;
    -webkit-transform: translateY(-10px);
  }
  50% {
    opacity: 1.0;
    -webkit-transform: translateY(0px);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: translateY(-10px);
  }
}

@-o-keyframes blinker {
  0% {
    opacity: 0.5;
    -o-transform: translateY(-10px);
  }
  50% {
    opacity: 1.0;
    -o-transform: translateY(0px);
  }
  100% {
    opacity: 0.5;
    -o-transform: translateY(-10px);
  }
}

@keyframes blinker {
  0% {
    opacity: 0.5;
    transform: translateY(-10px);
  }
  50% {
    opacity: 1.0;
    transform: translateY(0px);
  }
  100% {
    opacity: 0.5;
    transform: translateY(-10px);
  }
}
<body bgcolor="#FF6666">

  <div id="about-to-continue" class="more-arrow-maindiv home-arrow-position">
    <span class="more-arrow-title hp-more-arrow-title">Scroll Down</span>
    <span class="more-arrow more-arrow-hp blink_eff"></span>
  </div>

</body>

Upvotes: 1

Views: 384

Answers (0)

Related Questions