Menu
I have a small animation that is working in firefox, but not in webkit browsers. Maybe someone sees the mistake cause i've looked for an hour... It is part of a impress.js presentation, similar to prezi. Thanks!
css:
#its.step.present h5{ display: inline-block; position:absolute; animation: aia2 5s linear infinite alternate; -moz-animation: aia2 5s linear infinite alternate; -webkit-animation: aia2 5s linear infinite alternate; -ms-animation: aia2 5s linear infinite alternate; -o-animation: aia2 5s linear infinite alternate; -moz-animation-delay: 4s; -webkit-animation-delay: 4s; -ms-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; } @-moz-keyframes aia2{ 0%{ left:120px; -moz-transform:scale(1) rotate(0deg); -webkit-transform:scale(1) rotate(0deg); -ms-transform:scale(1) rotate(0deg); -o-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); color: red; } 90%{ left: 580px; -moz-transform:scale(1) rotate(2000deg); -webkit-transform:scale(1) rotate(2000deg); -ms-transform:scale(1) rotate(2000deg); -o-transform:scale(1) rotate(2000deg); transform:scale(1) rotate(2000deg); } 100%{ left: 580px; } } html:
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5"> <p> <ul> <li>Web Development,</li> <li>Web Design,</li> <li>Log<h5>o</h5> Design,</li> <li>Web Marketing,</li> </ul> <ul class="doua"> <li><h6>e</h6> Commerce,</li> <li>CMS (WP, J, D),</li> <li>Cust m Apps</li> <li>and others.</li> </ul> </p> </div> 
575
Animation Duration Not Set By default, a CSS animation cycle is zero seconds long. To override this, add an animation-duration rule to your targeted element with a seconds value, in the same block as animation-name. Below, try removing the comments around animation-duration to fix the animation.
Open the animation tools by first opening Chrome Dev Tools, then under the dev tools menu choose More tools > Animations. The Animations panel needs to already be open when the page is loaded to capture info on animations–refresh the page to achieve this.
CSS animations do not work with all browsers. Therefore, when using a browser with CSS animation, you need to take note of the browser version and test to see whether the elements you are using are supported.
The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times.
You have to put the general animation rule after the browser specific ones:
-webkit-animation: aia2 5s linear infinite alternate; -moz-animation: aia2 5s linear infinite alternate; -ms-animation: aia2 5s linear infinite alternate; -o-animation: aia2 5s linear infinite alternate; animation: aia2 5s linear infinite alternate; /* this comes last */ And since you have -webkit-animation: aia2, -moz-animation: aia2 etc. you have to set the animation for each browser like:
@-moz-keyframes aia2{ ... } @-webkit-keyframes aia2{ ... } @-o-keyframes aia2{ ... } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
