I have had this problem a number of times and there seems to be 2 ways of fixing it (shown below). You can use either of these properties to fix the rendering, or both at the same time. Backface visibility hidden fixes the problem as it simplifies the animation to just the front of the … Read more
To use CSS3 Animation you must also define the actual animation keyframes (which you named spin) Read https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations for more info Once you’ve configured the animation’s timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated … Read more
It looks like you’ve got a handle on how to do them, just not when to do them. A transition is an animation, just one that is performed between two distinct states – i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state … Read more
You can specify multiple animations–each with their own properties–with a comma. Example: animation: rotate 1s, spin 3s;
You’re looking for: animation-fill-mode: forwards; More info on MDN and browser support list on canIuse.
You can run a CSS animation on page load without using any JavaScript; you just have to use CSS3 Keyframes. Let’s Look at an Example… Here’s a demonstration of a navigation menu sliding into place using CSS3 only: @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } header { /* … Read more
Gradients don’t support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.). If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and ‘transition` the opacity. (There have been some browser releases that supported transitions on … Read more
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: … Read more
Try adding animation-fill-mode: forwards;. For example like this: -webkit-animation: bubble 1.0s forwards; /* for less modern browsers */ animation: bubble 1.0s forwards;