css3 animation not working in chrome - html
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>
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{
...
}
Chrome v43 dropped the -webkit- prefix for animation so if this worked before but not now, that's probably why.
One thing to check if you're developing in Firefox is Firefox will take an animation-name in quotes, but Chrome/Edge/Safari/Webkit will not.
Acceptable ONLY in Firefox:
animation-name: 'theAni';
Acceptable in all browsers (Chrome, Edge, Safari & Firefox):
animation-name: theAni;
for each property that you want add animation you need first determine its value then you can change it in keyframe.
here is a simple code that you can try it:
<!DOCTYPE html>
<head>
<style>
#forTest {
display: inline-block;
background-color: darkcyan;
width: 500px; /* here we determine the value of property that we want add animation */
height: 30px;
animation: a1;
animation-fill-mode: forwards;
animation-duration: 5s;
}
#keyframes a1{
to {
width: 100px;
}
}
</style>
</head>
<body>
<div id="forTest"></div>
</body>
</html>
Related
svg animation not displaying properly in Chrome
I've created a CSS SVG animation of a frame being drawn onto the stage. The animation works correctly, but there seems to be an issue mostly in Chrome. The stage should be blank before the animation begins and the frame, made up of 4 segments, "draws" in segment by segment. In some versions of Chrome, however, before the animation begins there are 4 dots on the stage. The dots are the beginning points of each segment of the frame and shouldn't be visible.
In a few versions of Chrome that I've tested it on (47.0.2526.106 on a Mac, 47.0.2526.83 on an Android phone, and 43.0.2357.130 for Windows), the dots are visible. In older versions of Chrome (43.0.2357.130 for Mac, for example) and in Safari and Firefox the dots are not visible. Has anyone else encountered a similar issue? Any help will be appreciated.
Here is a working example in a jsfiddle.
Here is the HTML:
<div id="mainContainer">
<div id="bottomLeftPosition">
<svg><path class="pathBottomLeft framePath" d="M127.504,105.451
c1.394-0.461,0.629-2.404,0.735-3.859c0.047-0.719,0.826-1.225,0.368-2.021c-0.338-0.598-1.333-0.398-2.39-0.735
c-1.424-0.442-1.931-1.087-3.493-0.735c-2.143,0.475-7.396,4.611-8.453,6.25c-0.674,1.041-1.501,3.322-1.471,4.227
c0.045,1.363,2.036,4.655,2.573,5.146c2.036,1.852,6.769,2.986,10.107,2.389c1.715-0.307,2.97-1.578,4.593-1.654
c2.084-2.389,4.381-4.564,6.066-7.352l0.887-5.713l-1.071-5.314c-1.286-3.615-4.104-5.696-6.064-8.637
c-1.579-0.965-3.461-1.058-5.147-1.84c-0.75-0.352-1.254-1.148-2.021-1.47c-1.775-0.735-3.98-0.245-5.696-1.47
c-7.427-0.858-13.187,0.994-19.665,2.021c-14.793,5.359-29.726,12.865-42.453,20.766c-1.011,0.628-2.022,1.426-3.125,2.021
c-1.93,1.043-3.293,1.533-5.697,2.389c-1.256,0.445-2.39,1.38-3.492,1.654c-4.642,1.166-9.604-1.285-12.498-4.225
c-0.934-2.758-2.573-5.451-2.389-9.926c0.077-1.852,1.01-3.538,0.551-5.329c3.186-8.179,6.616-16.249,11.578-23.708
c0.415-0.627,1.226-1.041,1.655-1.654c0.643-0.934,0.872-2.266,1.47-3.307c0.551-0.98,1.547-1.7,2.022-2.573
c1.592-2.911,2.389-7.168,2.94-10.66c0.245-1.547-0.261-2.925-0.368-4.595c-0.092-1.409,0.23-2.879,0.185-4.411
c-0.092-3.768-0.766-8.071-1.287-11.946c-0.291-2.145-0.26-4.84-1.103-6.8c-1.057-2.466-3.277-3.538-4.594-6.065
c-2.251-0.75-4.519-1.485-6.433-2.572L29.73,14.11c-2.634,0.214-3.967,1.777-6.065,2.94C21,20.665,13.879,30.804,18.152,35.98
c2.205,2.665,4.456,6.249,8.821,4.228c0.583-2.144,4.028-3.905,5.513-6.616c0.199-0.368,0.153-1.011,0.368-1.471
c0.367-0.75,0.995-1.24,1.103-1.837c0.062-0.367-0.336-3.89-0.551-4.595c-0.75-2.542-3.706-2.036-4.594,0"/></svg>
</div>
<div id="topLeftPosition">
<svg><path class="pathTopLeft framePath" d=
"M29.638,109.531c1.792-2.664,3.92-8.469,1.838-12.13c-0.75-0.123-1.087-0.55-1.654-0.919c-1.118-0.703-1.731-1.071-2.94-1.654
c-1.348-0.643-0.919-0.489-2.573-0.551c-1.976-0.062-2.665,0.443-4.043,1.654c-2.604,2.297-5.146,5.514-5.513,9.373
c-0.705,7.458,4.717,12.42,9.924,14.702c0,0,2.281,0.2,2.343,0.214c0.138,0,2.251-0.582,2.251-0.582
c1.93-0.918,3.094-2.449,4.595-3.857c1.057-0.981,2.22-1.303,3.124-2.572c0.521-0.736,1.011-1.824,1.654-2.758
c0.583-0.857,1.486-1.73,1.838-2.389c0.384-0.719,0.245-1.593,0.552-2.572c0.275-0.857,1.042-1.762,1.286-2.573
c0.903-2.972,0.659-7.366,0.552-10.292c-0.261-7.488-2.405-13.509-4.778-19.481c-0.751-1.915-2.083-3.476-2.941-5.33
c-0.628-1.362-1.087-2.817-1.838-4.226c-0.95-1.792-2.359-2.772-2.573-5.146c-2.374-3.553-3.584-7.903-4.962-12.129
c-0.475-1.456-1.287-3.064-1.471-5.513c-0.367-4.992,1.976-9.327,3.86-13.417c1.271-2.772,2.71-5.252,4.41-6.799
c5.989-5.438,16.847-8.333,26.648-8.088c4.794,0.123,9.909,0.581,14.152,2.021c1.486,0.506,3.032,1.286,4.595,1.837
c1.593,0.552,3.384,0.98,4.779,1.654c1.838,0.889,3.553,2.39,5.329,3.492c3.095,1.915,5.667,3.048,8.086,5.331
c2.543,2.404,4.442,5.482,6.802,7.902c2.557,2.635,5.713,4.012,8.453,6.249c2.863,0.812,5.729,1.624,7.902,3.124
c11.579,2.635,21.748-2.113,25.729-9.924c0,0,1.47-9.266,0.919-11.548c0.046-0.72-1.103-4.809-1.103-4.809
c-1.424-2.374-2.895-4.028-5.022-5.698c-0.949-0.827-3.568-2.803-6.785-1.179c-2.955,2.144-5.851,7.596-2.298,11.026
c2.358,2.268,6.311,1.731,9.558,2.206"/></svg>
</div>
<div id="topRightPosition">
<svg><path class="pathTopRight framePath" d="M25.065,32.641
c0,0,4.334-2.696,4.518-2.833c2.696-1.869,5.728-2.864,6.065-6.616c-0.995-7.259-8.883-7.32-12.772-4.15
c-2.849,2.312-5.391,7.473-5.391,12.512c0,2.021-0.015,5.223,0.919,7.352c0.674,1.532,2.925,3.706,4.962,4.411
c0.719,0.246,1.776,0.124,2.572,0.368c1.761,0.536,2.451,1.363,5.33,1.103c6.371-0.567,12.023-1.516,17.827-2.94
c1.257-0.307,2.052-0.842,3.309-1.287c1.593-0.582,3.385-0.582,4.963-1.103c2.894-0.965,5.773-2.375,8.637-3.492
c3.033-1.179,6.126-2.205,9.005-3.492c6.294-2.818,12.649-7.03,19.113-9.557c2.528-0.995,5.054-1.562,7.167-3.124
c0.675,0.061,1.195-0.031,1.654-0.184c4.624-2.926,12.865-3.645,19.113-3.676c1.041,0.612,2.129,1.179,3.676,1.286
c3.047,2.007,6.77,4.793,8.637,8.822c1.656,3.553,2.145,7.888,2.574,12.314c0.229,2.451-0.385,5.314-0.367,7.903
c0.107,13.768-7.704,24.688-11.763,35.653c-2.466,2.236-2.772,5.896-4.593,9.924c-0.322,0.721-0.995,1.286-1.287,2.021
c-2.344,5.881-3.83,15.408-0.185,20.217c1.685,2.221,7.169,4.977,10.661,3.859c2.268-0.72,3.521-2.543,5.145-4.41
c0.245-6.005-2.387-9.129-5.879-11.396c-1.104,0.309-1.93-0.211-2.757,0.369c-0.49,0.703-0.124,1.393-0.185,2.389"/></svg>
</div>
<div id="bottomRightPosition">
<svg><path class="pathBottomRight framePath" d="
M133.236,18.858c0.106,1.517-3.018,6.448,0.184,7.168c1.256,0.275,3.782-1.087,4.962-1.838c2.757-1.761,4.228-5.773,4.779-8.271
c-0.981-2.189-2.282-4.793-4.595-5.88c-3.645-1.716-8.867-0.153-11.027,2.205c-2.45,2.68-4.41,7.979-4.778,13.049
c-0.291,4.088,0.95,6.371,3.308,8.454c1.961,1.746,4.61,2.788,6.618,4.595c0.153,0.138,0.353,0.521,0.55,0.735
c2.007,2.159,3.507,4.441,4.963,7.536c0.658,1.393,1.026,5.575,1.471,7.657c0.628,2.91,1.623,6.264,1.838,9.005
c0.904,11.777-0.154,23.968-6.8,31.611c-1.731,1.163-3.309,2.647-5.147,3.858c-1.699,1.103-3.415,2.634-5.329,3.492
c-0.873,0.382-2.006,0.382-2.94,0.733c-5.238,1.962-11.104,2.59-17.828,3.31c-4.762,0.521-8.898,0.949-14.52,1.103
c-4.746,0.123-9.158,1.103-12.864-0.184c-3.69-0.153-6.708-2.129-10.475-2.205c-2.328-1.348-5.452-2.465-8.086-2.94
c-1.731-1.808-5.299-1.257-7.167-2.206c-0.888-0.153-0.659,0.812-1.654,0.552c-1.501-0.644-3.033-1.257-4.779-1.654
c-0.627-0.169-0.536-1.058-1.103-1.286c-2.971-0.904-4.961-3.554-7.718-4.596c-0.384-0.137-0.98,0.123-1.471,0
c-0.949-0.229-1.898-1.147-2.756-1.285c-9.802-1.517-18.486,8.055-16.54,17.09c0.321,1.486,0.413,3.493,2.052,5.897
c3.752,4.364,7.918,1.716,10.66-1.286c1.47-1.609,3.614-8.729,0.276-9.006c-2.85-0.23-5.391,3.338-5.882,3.491"/></svg>
</div>
<div id="border"></div>
</div>
And the CSS:
body {
margin:0;
padding:0;
}
#mainContainer{
position: relative;
width: 300px;
height: 600px;
overflow: hidden;
background-color: #fff;
}
#border{
position:absolute;
width:298px;
height:598px;
border:solid 1px #000;
}
#bottomLeftPosition{
position:absolute;
left:5px;
top:231px;
}
#topLeftPosition{
position:absolute;
left:9px;
top:123px;
}
#topRightPosition{
position:absolute;
left:140px;
top:116px;
}
#bottomRightPosition{
position:absolute;
left:130px;
top:226px;
}
.framePath {
width:160px;
height:130px;
fill:none;
stroke:#000;
stroke-width:3;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.pathBottomLeft {
animation: dash 1.7s linear 1.5s forwards;
-webkit-animation: dash 1.7s linear 1.5s forwards;
-moz-animation: dash 1.7s linear 1.5s forwards;
}
.pathTopLeft {
animation: dash 1.7s linear 2.2s forwards;
-webkit-animation: dash 1.7s linear 2.2s forwards;
-moz-animation: dash 1.7s linear 2.2s forwards;
}
.pathTopRight {
animation: dash 1.7s linear 2.9s forwards;
-webkit-animation: dash 1.7s linear 2.9s forwards;
-moz-animation: dash 1.7s linear 2.9s forwards;
}
.pathBottomRight {
animation: dash 1.7s linear 3.5s forwards;
-webkit-animation: dash 1.7s linear 3.5s forwards;
-moz-animation: dash 1.7s linear 3.5s forwards;
}
#keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
I don't necessarily think this is a bug, but it should certainly be fixed. Because there is a line with what seems to be a length of 0, you'd think it'd be invisible. But in these builds of Chrome, a line with a length of 0 and a positive stroke-width, will render. Just like how the browser will still render a div when it has been given a height of 0 but also a border thicker than 0. If you want to solve the issue, You can add something like visibility: hidden; or opacity: 0; to .framePath, and then add the opposite to the animation (at 0% and 100%)
CSS animation tricky bug in Chrome
I have the following CSS:
#-webkit-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
#-webkit-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.intro-text-0 {
opacity: 0;
-webkit-animation: fade-in 1s linear 1s,
fade-out 1s linear 3s;
-webkit-animation-fill-mode: forwards;
}
.intro-text-1 {
opacity: 0;
-webkit-animation: fade-in 1s linear 2s,
fade-out 1s linear 4s;
-webkit-animation-fill-mode: forwards;
}
And the simple HTML code:
<div class="intro-text-0">Hello</div>
<div class="intro-text-1">Holla</div>
When I run it, "Hello" appear in 1 second and in 3 seconds instead of fading out for 1 second, it fades out instantly. Here it is on JSFiddle: http://jsfiddle.net/3er6y0df/
I tried switching it to this:
.intro-text-0 {
opacity: 0;
-webkit-animation: fade-in 1s linear 2s,
fade-out 1s linear 4s;
-webkit-animation-fill-mode: forwards;
}
And it works perfectly.
I must mention, that this bug appeared only in Chrome (Version 37.0.2062.120 Built on Debian 7.6, running on Debian 7.7 (281580) (64-bit)), I check it out in Firefox and IE11 and there is no problem there.
Not really a bugfix though it could be a alternative.
Instead of animating a element with keyframes + animation on the elements itself why not put it all in the keyframe animation?
#keyframes AnimateMe {
0% { opacity:0%; }
80% { opacity:100%; }
100% { opacity:0%; }
}
I have experimented a bit and found a much simpler solution: -webkit-animation: fade-in 1s linear 1001ms, fade-out 1s linear 3s; -webkit-animation-fill-mode: forwards; Using 1001ms instead 1s (=1000ms) will not be noticed by a regular human eye :)
Animation not working in chrome
Can somebody tell me why blink effect is not working chrome browser
<p class="blink">at least it's not Comic Sans</p>
<style>
.blink {
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: steps(2, start);
}
#keyframes blink {
80% {
visibility: hidden;
}
}
</style>
And also I require this to work on every iOS and Android devices. Please suggest.
You are missing -webkit prefixes for animation and keyframes.
First of all, for reference, please do try out this:Tryit from W3School
Especially in chrome, things such as animation, transformation requires -webkit prefix. After reading my reference, you should be able to do it yourself.
But here is the solution anyway. See result here: JSFiddle
.blink {
-webkit-animation-duration: 1s;
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(2, start);
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: steps(2, start);
}
#-webkit-keyframes blink {
80% {
visibility: hidden;
}
}
#keyframes blink {
80% {
visibility: hidden;
}
}
You now can go on and read more about prefix (simply search about it google)
Text inside div animation
So I've got some text inside a < div > tag and I want it to animate. Now I want the text to start from a low opacity and then have the opacity increase as time passes. I've found an easy way for it to DECREASE but I find it near impossible to make it start from that state and do it backwards since if I change the opacity attribute on my < p > the < div > will always treat the < p > at that opacity.
My code (chrome):
#-webkit-keyframes opac /* Safari and Chrome */
{
0% {opacity:0.4}
25% {opacity:0.4}
50% {opacity:0.7}
75% {opacity:0.8}
100% {opacity:1}
}
.doge1:hover {
animation-name: opac;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: opac;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
HTML:
<div class="doge1">
<p>
Transitions in CSS are applied to an element and specify that when a property changes it should do so gradually over a period of time. Animations are different. When applied, they just run and do their thing. They offer more fine-grained control as you can control different stops of the animations.
</p>
</div>
This? Live demo here (click).
.doge1 > p {
opacity: 0.4;
}
#-webkit-keyframes opac /* Safari and Chrome */
{
0% {opacity:0.4}
25% {opacity:0.4}
50% {opacity:0.7}
75% {opacity:0.8}
100% {opacity:1}
}
.doge1:hover > p {
animation-name: opac;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: opac;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
Not sure if this is your desired effect, but you could achieve this a little easier with:
.doge1 {
opacity: .4;
transition: all 2s;
}
.doge1:hover {
opacity: 1;
}
http://jsfiddle.net/JFA7g/
Assistance needed with CSS3 Animation Keyframes
You can see what I have so far here: http://codepen.io/joe/pen/mkjxi My goal is to make the lines of text appear in a staggered way, giving a nice effect to the homepage of a site. My problem is that the 3 bottom lines of text end up reverting back to white. The reason I had made the text transition from white to black is only because I couldn't get display:none or visibility:hidden; to work with the keyframes... Any help is greatly appreciated! Thanks
The trick is to make use of the forwards value in the animation shorthand property. This changes the fill mode and keeps the last keyframe visible after the animation has run.
Also, there is no need to use separate animations, you could do it with only one. Here is how:
<!-- HTML -->
<div class="text1">Expert Electricians.</div>
<div class="text2">Serving all of Los Angeles,</div>
<div class="text3">Ventura and Orange Counties</div>
<div class="text4">For over 20 years</div>
/* CSS */
div {
color: #fff;
text-transform:uppercase;
}
.text1 {
-webkit-animation:text 2s .5s forwards;
-moz-animation:text 2s .5s forwards;
-o-animation:text 2s .5s forwards;
animation:text 2s .5s forwards;
}
.text2 {
-webkit-animation:text 2s 1s forwards;
-moz-animation:text 2s 1s forwards;
-o-animation:text 2s 1s forwards;
animation:text 2s 1s forwards;
}
.text3 {
-webkit-animation:text 2s 1.5s forwards;
-moz-animation:text 2s 1.5s forwards;
-o-animation:text 2s 1.5s forwards;
animation:text 2s 1.5s forwards;
}
.text4 {
-webkit-animation:text 2s 2s forwards;
-moz-animation:text 2s 2s forwards;
-o-animation:text 2s 2s forwards;
animation:text 2s 2s forwards;
}
#-webkit-keyframes text {
100% {color:#000;}
}
#-moz-keyframes text {
100% {color:#000;}
}
#-o-keyframes text {
100% {color:#000;}
}
#keyframes text {
100% {color:#000;}
}
Here is a live example: http://jsfiddle.net/joshnh/2Sp48/