CSS @Keyframe Animation Flickers on Hover

CSS @keyframe animation flickers on hover

If you are intrested you can approximate this using only CSS with text-stroke. You simply need to update with the correct font-family:

body {
  background:#000
}

.logo {
   font-family:monospace;
   text-transform:uppercase;
   font-size:60px;
   color:#fff;
   animation: bruxism 1s infinite steps(6);
}

@keyframes bruxism{
   0% {
     -webkit-text-stroke:1px #fff;
             text-stroke:1px #fff;
  }
  20% {
     -webkit-text-stroke:2px #fff;
             text-stroke:2px #fff;
  }
  40% {
     -webkit-text-stroke:3px #fff;
             text-stroke:3px #fff;
  }
  60% {
     -webkit-text-stroke:4px #fff;
             text-stroke:4px #fff;
  }
  80% {
     -webkit-text-stroke:5px #fff;
             text-stroke:5px #fff;
  }
  100% {
     -webkit-text-stroke:6px #fff;
             text-stroke:6px #fff;
  }
}

<div class="logo">bruxism</div>

How to fix flickering from css keyframe animation

The reason they flicker is because you have set an animation on their parent, the child.

And since its animation doesn't have a delay, it starts before its children, but will then be overridden by them as soon as their delay has passed, hence one can see a quick flash.

The best way to avoid any future issue with this, is to remove the animation from the child

.container {

  position: fixed;

  left: 150px;

  top: 50px;

}

.container .child {

  position: absolute;

}

.container .child::before {

  display: block;

  position: absolute;

  width: 25px;

  height: 25px;

  background-color: red;

  content: "";

  right: 40px;

  animation: mymove 1s infinite;

  animation-delay: 0.15s;

}

.container .child div {

  width: 25px;

  height: 25px;

  background-color: red;

  animation: mymove 1s infinite;

  animation-delay: 0.3s;

}

.container .child::after {

  display: block;

  position: absolute;

  width: 25px;

  height: 25px;

  background-color: red;

  content: "";

  left: 40px;

  bottom: 0px;

  animation: mymove 1s infinite;

  animation-delay: 0.45s;

}

@keyframes mymove {

  0% {

    opacity: 1;

  }

  100% {

    opacity: 0;

  }

}

<div class="container">

  <div class="child">

    <div></div>

  </div>

</div>

keyframe animation on hover

:hover is the state when you have your mouse above that element.
You don't want to have an animation when you are NOT hovering so you set animation: none; on the default state .pulse-animation. If you hover the class .pulse-animation then you set animation: pulse 2s infinite;

see the example below

.pulse-animation {

  margin: 50px;

  display: block;

  width: 52px;

  height: 52px;

  border-radius: 50%;

  background: #ff8717;

  cursor: pointer;

  animation: none;

  float: left;

}

.pulse-animation:hover {

  animation: pulse 2s infinite;

}

@keyframes pulse {

  0% {

    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);

    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);

  }

  70% {

    -moz-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);

    box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);

  }

  100% {

    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);

    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);

  }

}

<span class="pulse-animation"></span>

<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/1.jpg" />

<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/2.jpg" />

<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/3.jpg" />

<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/4.jpg" />

CSS animation on hover stay at last keyframe when using transform: rotate

For those of you with a similar problem, first make sure you are using animation-fill-mode: forwards. See this related question.

In this specific case, the following is relevant:

CSS Transforms Module Level 1

A transformable element is an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.

Since the .circle element is a span, it is inline by default, therefore the property transform: rotate() won't have an effect on it after the animation ends. Changing the display of it to either inline-block or block will solve the problem.

You should also be using the animation shorthand. In addition, add in other vendor prefixes:

Updated Example Here

.circle:hover .spin {
    display:inline-block;
    -webkit-animation: drop 1s 1 alternate ease-out forwards;
    -moz-animation: drop 1s 1 alternate ease-out forwards;
    animation: drop 1s 1 alternate ease-out forwards;
}

How to make blinking/flashing text with CSS 3

You are first setting opacity: 1; and then you are ending it on 0, so it starts from 0% and ends on 100%, so instead just set opacity to 0 at 50% and the rest will take care of itself.

Demo

.blink_me {

  animation: blinker 1s linear infinite;

}

@keyframes blinker {

  50% {

    opacity: 0;

  }

}

<div class="blink_me">BLINK ME</div>

How to prevent a CSS keyframe animation from running on page load?

Solution 1 - Add down animation on first hover

Probably the best option is to not put the down animation on until the user has hovered over the container for the first time.

This involves listening to the mouseover event then adding a class with the animation at that point, and removing the event listener. The main (potential) downside of this is it relies on Javascript.

;(function(){

    var c = document.getElementById('container');

    function addAnim() {

        c.classList.add('animated')

        // remove the listener, no longer needed

        c.removeEventListener('mouseover', addAnim);

    };

    // listen to mouseover for the container

    c.addEventListener('mouseover', addAnim);

})();

#container {

    position:relative;

    width:100px;

    height:100px;

    border-style:inset;

}

#content {

    position:absolute;

    top:100px;

    width:100%;

    height:100%;

    background-color:lightgreen;

    opacity:0;

}

/* This gets added on first mouseover */

#container.animated #content {

    -webkit-animation:animDown 1s ease;

}

#container:hover #content {

    -webkit-animation:animUp 1s ease;

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode:forwards;

}

@-webkit-keyframes animUp {

    0% {

        -webkit-transform:translateY(0);

        opacity:0;

    }

    100% {

        -webkit-transform:translateY(-100%);

        opacity:1;

    }

}

@-webkit-keyframes animDown {

    0% {

        -webkit-transform:translateY(-100%);

        opacity:1;

    }

    100% {

        -webkit-transform:translateY(0);

        opacity:0;

    }

}

<div id="container">

    <div id="content"></div>

</div>

How to pause a CSS keyframe animation when it ends the first cycle?

I know what you are doing here, use CSS transition instead

Demo

.class {
   color: #ff0000;
   transition: color 2s;
   -moz-transition: color 2s; /* Firefox 4 */
   -webkit-transition: color 2s; /* Safari and Chrome */
   -o-transition: color 2s; /* Opera */
}

.class:hover {
   color: #00ff00;
}

You wont be able to preserve the hovered state of your text, for that you need to use JavaScript

Keyframe animation for max-height running but not working

Seems to work fine if you include the keyframes like @Akshay mentioned.

#navigation {

    position:relative;

    width: 100%;

    padding: 15px;

}

#navigation ul {

    list-style-type: none;

}

#navigation ul > li {

    position: relative;

    float:left;

}

#navigation ul > li > * {

    float: left;

}

#navigation ul.nav_sub_menu {

    overflow:hidden;

}

#navigation ul.nav_sub_menu > li {

    width: 100%;

}

#navigation div.nav_sub_menu_wrapper {

    position: absolute;

    overflow:hidden;

    top: 42px;

    max-height: 0;

}

#navigation a.nav_button:hover + div.nav_sub_menu_wrapper {

    z-index: 99;

    max-height: 500px;

}

#navigation a.nav_button:hover + div.nav_sub_menu_wrapper ul.nav_sub_menu {

    /* iE doesn't play nice with shorthand play-state, but it's initially running so it's redundant */

    -webkit-animation-play-state: running;

    -moz-animation-play-state: running;

    -o-animation-play-state: running;

    animation-play-state: running;

    -webkit-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Chrome 4.3 | Edge | Safari 4.0 - 8.0 */

    -moz-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Firefox 5.0 | Gecko 16.0 */

    -o-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Opera 12 */

    animation: slideDown 500ms linear 0s 1 normal forwards; /* Modern browsers */

}

@keyframes slideDown{

    from {

        max-height: 0;

    }

    to {

        max-height: 500px;

    }

}

#navigation a.nav_button {

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */

    background: #4E7C87; /* Old browsers */

    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,

    #253767 67%, #2d2f62 83%, #213059 100%); /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,

    #253767 67%, #2d2f62 83%, #213059 100%); /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,

    #253767 67%, #2d2f62 83%, #213059 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7c87', endColorstr='#304480',GradientType=0 ); /* IE6-9 */

    color: white;

    float: left;

    padding: 10px 25px 10px 15px;

    border: 1px solid black;

    font-size:1.2em;

    text-transform: uppercase;

    text-decoration: none;

}

#navigation a.nav_button:hover {

    background: #4E7C87; /* Old browsers */

    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,

    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,

    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,

    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7c87', endColorstr='#4473c8',GradientType=0 ); /* IE6-9 */

}

<section id="navigation">

  <nav>

   <ul>

    <li>

     <a href="javascript:void(0)" class="nav_button">Home</a>

    </li>

    <li>

     <a href="javascript:void(0)" class="nav_button">Portfolio</a>

     <div class="nav_sub_menu_wrapper">

      <ul class="nav_sub_menu">

       <li><a href="javascript:void(0)" class="nav_sub_button">About me</a></li>

       <li><a href="javascript:void(0)" class="nav_sub_button">Goals</a></li>

       <li><a href="javascript:void(0)" class="nav_sub_button">Realizations</a></li>

       <li><a href="javascript:void(0)" class="nav_sub_button">Future plans</a></li>

      </ul>

     </div>

    </li>

    <li>

     <a href="javascript:void(0)" class="nav_button">About</a>

    </li>

    <li>

     <a href="javascript:void(0)" class="nav_button">Contact</a>

    </li>

   </ul>

  </nav>

 </section>

---

Related Topics