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;
Related
I have an animation that slides an image from right to left that worked before, but has stopped working in the latest Safari and iOS.
I don´t understand why?
This is the code.
.slideLeft{
overflow:hidden;
animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-name: slideLeft;
-webkit-animation-name: slideLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideLeft {
0% {
transform: translateX(120%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(120%);
}
100% {
-webkit-transform: translateX(0%);
}
}
Any input appreciated, thanks.
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;
}
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)
I am trying to get an image to slide out to the left when the page loads using purely CSS.
So, far I've got: http://jsfiddle.net/o7thwd/qZbhJ/ and it seems to work. The issue I can't seem to get over is how the image comes back into view once the animation is over.
#slide {
left:0;
width:268px;
-moz-animation-name: slideOut;
-moz-animation-iteration-count: once;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 1.5s;
-webkit-animation-name: slideOut;
-webkit-animation-iteration-count: once;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1.5s;
-o-animation-name: slideOut;
-o-animation-iteration-count: once;
-o-animation-timing-function: ease-out;
-o-animation-duration: 1.5s;
animation-name: slideOut;
animation-iteration-count: once;
animation-timing-function: ease-out;
animation-duration: 1.5s;
}
#-o-keyframes slideOut {
0% {
margin-left: 0;
}
100% {
margin-left: -268px;
}
}
#keyframes slideOut {
0% {
margin-left: 0;
}
100% {
margin-left: -268px;
}
}
#-moz-keyframes slideOut {
0% {
margin-left: 0;
}
100% {
margin-left: -268px;
}
}
#-webkit-keyframes slideOut {
0% {
margin-left: 0;
}
100% {
margin-left: -268px;
}
}
How can I get it to stay folded to the left like it does on initial page load?
basically you add the following CSS -webkit-animation-fill-mode: forwards; and the animation end will be persistent rather than revert back to the original.
WORKING JSFIDDLE
Oh and you only need to use the -webkit- vendor specific for animations there are no -moz- or -o- vendor specifics for animations
CSS:
#slide {
left:0;
width:268px;
-webkit-animation-name: slideOut;
-webkit-animation-iteration-count: once;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1.5s;
animation-name: slideOut;
animation-iteration-count: once;
animation-timing-function: ease-out;
animation-duration: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes slideOut {
0% {
margin-left: 0;
}
100% {
margin-left: -268px;
}
}
#-webkit-keyframes slideOut {
0% {
left: 0;
}
100% {
left: -268px;
}
}
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