I want a pulse effect on the div when it is clicked ..
I have made a jsfiddle for it.
#-webkit-keyframes pulse_animation {
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
Pulse Animation code
#-moz-keyframes pulse_animation{
0% { -moz-transform: scale(1); }
30% { -moz-transform: scale(1); }
40% { -moz-transform: scale(1.08); }
50% { -moz-transform: scale(1); }
60% { -moz-transform: scale(1); }
70% { -moz-transform: scale(1.05); }
80% { -moz-transform: scale(1); }
100% { -moz-transform: scale(1); }
}
It's working on Chrome very well but not in Firefox ..
You added quotes around the animation name, which made it fail, try this: http://jsfiddle.net/MrdvW/593/
-moz-animation-name: pulse_animation;
Also, you don't need the -moz- prefixes anymore with the current firefox versions.
Moz guide to animations
you haven't add a vendor prefix for Firefox. -moz-animation-name which is required for older version of Firefox only. Latest Firefox version fully support the standard version.
#keyframes your_animation_name is a standard and valid by w3c. you should also include it.
it works well withe latest FF and latest IE. however prefix version still required for webkit based browser.
Related
I have a simple bounce in animation for my figure , see HTML below:
<figure>
<img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt="">
<figcaption>
<!-- empty for now -->
</figcaption>
</figure>
My CSS animation is as follows:
#keyframes drop-in-thumb {
0% {
-webkit-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0.8;
}
35% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
55% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px);
}
70% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
85% {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
The fiddle can be seen HERE.
The problem is my animation is quite jerky , I.E. it does't have a realistic bounce in effect , it looks clearly quite jerky. My question is what other property in the keyframes apart form the % breakpoints can i use to tweak and make my animation smooth ?
Tweaking the % breakpoints really helped me make the animation much more smoother and but its really not yet realistic yet. What other CSS animation property can i use to make this animation smoother ?
It would be great if somebody could demonstrate how i could perfect and make this animation much more smoother.
P.S. i am aware of the library animate.css but don't want to use it.
The animation-timing-function property should improve this considerably.
Try adding the following to the styles for figure:
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
I've edited your fiddle to show the difference: https://jsfiddle.net/ssexmh3s/2/
I have this css :
.yellowText {
color: #FFFF00;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
transform: rotate(-20deg);
}
.pulse {
-webkit-animation: text-anim;
animation: text-anim 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
#keyframes text-anim {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
Then, I apply it to a text :
<p class="yellowText pulse">Some text here</p>
But now, the text is well-animated, without being rotated by -20°... Any idea of what could be wrong ? I believe this is a problem with the transform property not working with the animation one. Also, what I tried was putting the transform inside the #keyframes text-anim, but what this does is just periodically rotating the text, having it perfectly right the rest of the time...
Thanks in advance for your help !
PS : forgive my bad English, I'm French :P
Your #keyframes are overriding you original transform property.
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1 rotate(-20deg); }
50% { -webkit-transform: scale(1.1) rotate(-20deg); }
100% { -webkit-transform: scale(1) rotate(-20deg); }
}
#keyframes text-anim {
0% { transform: scale(1) rotate(-20deg); }
50% { transform: scale(1.1) rotate(-20deg); }
100% { transform: scale(1) rotate(-20deg); }
}
Hey I do have the following code :
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
and the call :
-webkit-animation: rotate 1000ms infinite linear;
Unfortunately, my spinner is still not rotating on Ipad/Iphone
Any idea why ?
Thanks !
The came from the fact that I needed :
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
It is now fixed
My code doesnt work in Firefox and I dont know why. Any advices? It works fine in Chrome, IE and Opera. I tried almost all prefixes combinations but still it wont work. Is it possible that something is wrong with my PC or Firefox browser?
.span-accent {
color: rgb(60, 185, 120);
-webkit-animation: breath 2s infinite;
-moz-animation: breath 2s infinite;
animation: breath 2s infinite;
}
#-webkit-keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes breath {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
25% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-moz-transform: scale(1);
transform: scale(1);
}
75% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
<h1>LAKA</h1>
<h2>architecture that <span class="span-accent">reacts.</span></h2>
Ok guys, I found it.
Problem is in <span> element. For some reason Firefox doesnt animate inline elements.
So what I did is change a <span> atribute to display: inline-block.
It just wont work strictly for any inline element.
I have the following two codes
.button:hover {
-webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
And
#-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotateX(-10deg);
}
70% {
-moz-transform: perspective(400px) rotateX(10deg);
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#-o-keyframes flipInX {
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-o-transform: perspective(400px) rotateX(-10deg);
}
70% {
-o-transform: perspective(400px) rotateX(10deg);
}
100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.animated.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
The first code works perfectly on every browser. It gives the required transition.
But when I used the second code, It worked perfectly on Chrome. But does not work on any other browser.
I read other questions here, came across here .
As it suggested, I should not use -moz -o -webkit. But that did not work for me.
There was a fiddle on that page too, http://jsfiddle.net/EghZs/ . It only works on my chrome. and not on any other browser.
Is this an issue with my browsers? Or is this a problem with the code?
It looks like you aren't specifying for enough browsers at the # level, and also in your #-moz block, the transform should just be "transform" instead of "-moz-transform" according to Mozilla's current documentation. (Since older versions of Firefox still use -moz-transform, you may have to get tricky with an #support block to manage older and newer Firefox versions at the same time.)
So essentially, you should be good to go after correcting the -moz-transform, and adding the correct support and prefixes for the other browsers.
I would try (condensed your spacing for brevity):
#-webkit-keyframes flipInX {
/* same block as you already have */
}
#-moz-keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% { transform: perspective(400px) rotateX(-10deg); }
70% { transform: perspective(400px) rotateX(10deg); }
100% { transform: perspective(400px) rotateX(0deg); }
}
#-o-keyframes flipInX { /* Opera */
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% { -o-transform: perspective(400px) rotateX(-10deg); }
70% { -o-transform: perspective(400px) rotateX(10deg); }
100% { -o-transform: perspective(400px) rotateX(0deg); }
}
#keyframes flipInX {
/* this will cover other browsers that
support keyframes and transforms */
0% {
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
}
}
Edit: IE will require -ms-transform, so I added that in.