Can anyone see what I do wrong? I'm trying to make my animation css work in Firefox but somehow, it still doesn't work.
.animatietekst {
-webkit-animation: scaling 1s 10 ease;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation: scaling 1s 10 ease;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
#-webkit-keyframes scaling {
from {
-webkit-transform: scale(0.96);
}
to {
-webkit-transform: scale(1);
}
}
#-moz-keyframes scaling {
from {
-webkit-transform: scale(0.96);
}
to {
-webkit-transform: scale(1);
}
}
Firefox doesn't recognise webkit transforms
#-moz-keyframes scaling {
from {
-moz-transform: scale(0.96);
}
to {
-moz-transform: scale(1);
}
}
In any case you don't need the moz prefix any more
#keyframes scaling {
from {
transform: scale(0.96);
}
to {
transform: scale(1);
}
}
will work just fine with
.animatietekst {
-webkit-animation: scaling 1s 10 ease;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation: scaling 1s 10 ease;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Related
I have a simple CSS animation which runs fine on desktop but doesn't seem to work on iPad. I have tried both Chrome and Safari.
Here's the code:
.scroll-down img {
-webkit-animation: 3s ease 0s normal none infinite running myscroll;
-moz-animation: 3s ease 0s normal none infinite running myscroll;
animation: 3s ease 0s normal none infinite running myscroll;
}
#-webkit-keyframes myscroll {
0% {
opacity: 1
}
50% {
opacity: 1
}
100% {
opacity: 1;
-webkit-transform: translateY(101px);
transform: translateY(101px);
}
}
Do I have some type of syntax error?
always add the generic - not browser specific version of css when also using the browser one ex.
#-webkit-keyframes myscroll {
0% {
opacity: 1
}
50% {
opacity: 1
}
100% {
opacity: 1;
-webkit-transform: translateY(101px);
transform: translateY(101px);
}
}
#keyframes myscroll {
0% {
opacity: 1
}
50% {
opacity: 1
}
100% {
opacity: 1;
-webkit-transform: translateY(101px);
transform: translateY(101px);
}
}
Found a solution. Apparently iPad doesnt like shorthand so I had to do this:
-webkit-animation-name: myscroll;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: none;
-webkit-animation-play-state: running;
animation-name: myscroll;
animation-duration: 3s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-timing-function: ease;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
I have this code that spins an image when hovering:
img:hover {
-webkit-animation-name: spin;
-webkit-animation-duration: .15s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: .15s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: .15s;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: .15s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
http://jsfiddle.net/79FHN/1/
I want it to spin to the other direction when un-hovering.
How can I do this?
I can refactor your code to great extent, all you need is
Demo
img {
-webkit-transition: 1s linear;
transition: 1s linear;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
The issue with your code was, that you were using #keyframes which are nothing but animation, so once it triggers, you need to write a separate keyframe for reversing. As your animation was not so complex, I preferred using simple CSS3 properties to get the job done.
If you feel the animation nudges your icon or you deliberately want to nudge on hover, you can use transform-origin property.
Thanks to #Second Rikudo for pointing out the linear issue.
Playing around with CSS 3 animations but for some reasons, all animations return to their original state after execution.
In this case I'd like the image to remain at scale(1) after animation and my text to oly appear after img animation but stay afterward.
.expanding-spinning {
-webkit-transform: scale(.4);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
animation-duration: 500ms;
}
.expanding-spinning {
-webkit-animation: spin2 1.4s ease-in-out alternate;
animation: spin2 1.4s ease-in-out alternate;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg) scale(.4);}
100% { -webkit-transform: rotate(360deg) scale(1);}
}
#-keyframes spin2 {
0% { transform: rotate(0deg) scale(.4);}
100% { transform: rotate(360deg) scale(1);}
}
#-webkit-keyframes fadeInFromNone {
0% {
display:none;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
.slogan {
display: block;
opacity: 1;
-webkit-animation-duration: 2s;
-webkit-animation-name: fadeInFromNone;
-webkit-animation-delay: 3.5s;
}
Fiddle code
You need to add the rule -webkit-animation-fill-mode: forwards; to your animations.
Also, regarding the text animation: Animate the visibility property instead of display property
FIDDLE
.expanding-spinning {
-webkit-animation: spin2 1.4s ease-in-out;
-moz-animation: spin2 1.4s linear normal;
-o-animation: spin2 1.4s linear;
-ms-animation: spin2 1.4s linear;
animation: spin2 1.4s ease-in-out alternate;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards; /* <--- */
}
#-webkit-keyframes fadeInFromNone {
0% {
visibility:hidden;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.slogan {
visibility:hidden;
opacity: 1;
-webkit-animation-duration: 2s;
-webkit-animation-name: fadeInFromNone;
-webkit-animation-delay: 3.4s;
-webkit-animation-fill-mode: forwards; /* <--- */
}
See this article for a nice explanation of all the animation properties
The fill mode. If set to forwards, the last keyframe remains at the
end of the animation,
(from above link)
So I'm trying to animate some text dropping down once its finished animating.
The problem is it just disappears after it's finished, even though I set the opacity to 1# 100%.
/* text animation */
#-webkit-keyframes textAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(-200%);
}
10% {
opacity: 1;
-webkit-transform: translateY(0%);
}
20% {
opacity: 1;
-webkit-transform: translateY(0%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
.text-animation {
z-index: 1000;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: textAnimation 2s linear 2s;
-moz-animation: textAnimation 2s linear 2s;
-o-animation: textAnimation 2s linear 2s;
-ms-animation: textAnimation 2s linear 2s;
animation: textAnimation 2s linear 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
/* text animation */
I just don't understand what the problem is here...
This worked for me.
If you set the end state in the class and not add a delay.
#-webkit-keyframes textAnimation {
0% { opacity: 0; -webkit-transform: translateY(-200%); }
33% { opacity: 1; -webkit-transform: translateY(-200%); }
100% { opacity: 1; -webkit-transform: translateY(0%); }
}
.text-animation {
color:#fff;
font-size:32px;
width: 100%;
text-align: center;
opacity: 1;
-webkit-animation: textAnimation 3s linear;
-moz-animation: textAnimation 3s linear;
-o-animation: textAnimation 3s linear;
-ms-animation: textAnimation 3s linear;
animation: textAnimation 3s linear;
}
In you .text-animation declaration add this :
-webkit-animation-fill-mode: forwards;
Thanks to it, your animation will stay to the last keyframe state. (here, opacity 0).
You can see the result here : http://codepen.io/joe/pen/CkbcL
Source : https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode
I've come across this post//
Slide out text from an image using CSS on hover
The CSS works perfectly, except I would like for the animation to stop after it's rotated once.
Is this possible? If so how can I accomplish this?
HTML:
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(180deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(180deg);
}
to {
-moz-transform: rotate(0deg);
}
}
.srch_btn:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
Change animation-iteration-count: infinite to 2.