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.
Related
I'm pretty new to programming and CSS animations so please excuse me if I'm using the wrong terms :-)
I have two animations on one element. I have an image of a man on a scooter that slides into the homepage (once) when it's loaded and then on hover it bounces (infinite).
Below is my code:
HTML:
<section>
<!--Animation and Welcome Heading-->
<div class="welcome-container">
<img id="scooter-animation" src="./images/Man_On_Scooter.png" alt="Man on Electric Scooter">
<h1>welcome to suoto.</h1>
</div>
</section>
CSS:
/* Animated Scooter Slide-In */
#keyframes slide {
100% {
left: 0%;
}
}
#-webkit-keyframes slide {
100% {
left: 0%;
}
}
/* Animated Scooter Bounce on Hover */
#keyframes bounce {
0%,
100%,
20%,
50%,
80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px)
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px)
}
}
#scooter-animation {
position: relative;
left: -200%;
-webkit-animation: slide 2s forwards;
-webkit-animation-delay: 0s;
animation: slide 2s forwards;
animation-delay: 0s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
#scooter-animation:hover {
cursor: pointer;
animation-name: bounce;
-moz-animation-name: bounce;
-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;
left: 0% !important;
}
Everything is running perfectly except as soon as the mouse hovers anywhere else on the webpage, the animation disappears from screen and slides in again when I only want this to happen once. Does anybody have any idea what it is I'm doing wrong?
Thank you for your answers and have a nice day!
I have changed your code structure a bit and added Javascript but It should work now. Basically I gave initial class name for your image and I cancelled this class name after first render. As a result cancelling initial css feature from image fixed the problem.
window.addEventListener('load', animate);
function animate() {
setTimeout(function(){ document.getElementById('scooter-animation').classList.remove('slide'); }, 3000);
}
/* Animated Scooter Slide-In */
#keyframes slide {
0% {
left: -200%;
}
}
#-webkit-keyframes slide {
100% {
left: 0%;
}
}
/* Animated Scooter Bounce on Hover */
#keyframes bounce {
0%,
100%,
20%,
50%,
80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px)
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px)
}
}
#scooter-animation {
width:200px;
}
.slide {
position: relative;
-webkit-animation: slide 2s forwards;
-webkit-animation-delay: 0s;
animation: slide 2s 1;
animation-delay: 0s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
#scooter-animation:hover {
cursor: pointer;
animation-name: bounce;
-moz-animation-name: bounce;
-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;
left: 0%;
}
<body>
<section>
<!--Animation and Welcome Heading-->
<div class="welcome-container">
<img class='slide' id="scooter-animation" src="https://d2mvzyuse3lwjc.cloudfront.net/doc/en/UserGuide/images/Pie_Of_Pie_Chart/Pie_Of_Pie_Chart.png?v=83478" alt="Man on Electric Scooter">
<h1>welcome to suoto.</h1>
</div>
</section>
<body>
I recently built this little demo where three elements are continuously spinning until you click in one of them and then it moves for the middle of the screen and gets bigger. Here's the CSS:
.spin {
animation-name: spin;
animation-duration: 0.9s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
animation-fill-mode: backwards;
animation-delay: 0s;
}
.selected {
cursor: auto;
animation-name: spin, selected;
animation-duration: 0.9s, 1s;
animation-timing-function: linear, ease-out;
animation-iteration-count: infinite, 1;
animation-play-state: paused, running;
animation-fill-mode: backwards, forwards;
animation-delay: 0s, 0s;
z-index: 1;
}
#keyframes spin {
0% {
transform: translateX(150%) scale(0.5) rotate(10deg);
opacity: 0;
}
50% {
transform: translateX(0%) scale(1) rotate(0deg);
opacity: 1;
}
100% {
transform: translateX(-150%) scale(0.5) rotate(-10deg);
opacity: 0;
}
}
#keyframes selected {
to {
transform: translateY(0) scale(1.4) rotateY(180deg);
opacity: 1;
}
}
In Firefox this code works as expected: the click stops the spin animation and the element moves from where it is to the to parameter of the selected animation. In Chrome the override is less subtle, the element stops and then instantaneously appears in the middle of the screen.
I would appreciate any help with figuring out a way I could achieve this by applying one of the animations to a parent element or without overriding the transform property of the card, and also answers to why the different approach on overriding the transform property.
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 want to have a css-coded animated rotating svg image. I have no idea how to do that. At the end it has to look exactly like this: http://baveltje.com/logo/logo.html. I am completely new to css. The rotating svg's are gear1.svg and gear2.svg. I want them to rotate 360 degres for infinite time and I want to call them <.div class="gear1"> and gear2.. Is it possible to let it look exactly like the logo does in the link, but rotating?
I tried to use jsfiddle.net/gaby/9Ryvs/7/, but with no results. It has to go the same speed like that fiddle does!
Thanks in advance!
Code:
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
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);
}
}
Here is your original animation css (I have removed prefixes to keep it simple):
#gear{
animation-name: ckw;
animation-duration: 15.5s;
}
#keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
In #gear you should add:
animation-iteration-count to infinite to keep it rolling
transform-origin to center of your div 50% 50% to get gear rolling around itself
display to inline-block
Result:
#gear{
animation-name: ckw;
animation-duration: 15.5s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: 50% 50%;
display: inline-block;
/* <--- */
}
#keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
And of course add correct prefixes.
I have reviewed quite a few demos and have no idea why I can't get the CSS3 spin to function. I am using the latest stable release of Chrome.
The fiddle:
http://jsfiddle.net/9Ryvs/1/
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-transition: rotate(3600deg);
}
<div></div>
To use CSS3 Animation you must also define the actual animation keyframes (which you named spin)
Read https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations for more info
Once you've configured the animation's timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the #keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.
Demo :
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
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);
}
}
<div></div>
#-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);}
}
You haven't specified any keyframes. I made it work here.
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation: spin 4s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
You can actually do lots of really cool stuff with this. Here is one I made earlier.
:)
N.B. You can skip having to write out all the prefixes if you use -prefix-free.
As of latest Chrome/FF and on IE11 there's no need for -ms/-moz/-webkit prefix.
Here's a shorter code (based on previous answers):
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
/* The animation part: */
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
Live Demo: http://jsfiddle.net/9Ryvs/3057/
HTML with font-awesome glyphicon.
<span class="fa fa-spinner spin"></span>
CSS
#-moz-keyframes spin {
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
to {transform:rotate(360deg);}
}
.spin {
animation: spin 1000ms linear infinite;
}
The only answer which gives the correct 359deg:
#keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
&.active {
animation: spin 1s linear infinite;
}
Here's a useful gradient so you can prove it is spinning (if its a circle):
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
To rotate, you can use key frames and a transform.
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
#-webkit-keyframes spin {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
Example
For the sake of completion, here's a Sass / Compass example which really shortens the code, the compiled CSS will include the necessary prefixes etc.
div
margin: 20px
width: 100px
height: 100px
background: #f00
+animation(spin 40000ms infinite linear)
+keyframes(spin)
from
+transform(rotate(0deg))
to
+transform(rotate(360deg))
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
this will make you to answer the question
For the guys who still search some cool and easy spinner, we have multiple exemples of spinner on fontawesome site : https://fontawesome.com/v4.7.0/examples/
You just have to inspect the spinner you want with your debugger and copy the css styles.