I have some problem with animations. I'm writing steam animation and I need use translate and scale main time. I write some example you can see that it doesn't work. If you have time please help to do it correctly thanks.
html
<img src="https://lh3.googleusercontent.com/-uU_C0PBe64k/VSd6800h1bI/AAAAAAAAFM8/hp-vH8wT3U4/w63-h57-no/steam.png" />
css
#mixin steamLeft($speed, $delay) {
-webkit-animation-name: steamLeft;
animation-name: steamLeft;
animation-duration: $speed;
animation-delay: $delay;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
img {
position: absolute;
top: 50px;
left: 100px;
width: 63px;
height: 57px;
#include steamLeft(2s,0);
}
#keyframes steamLeft {
0% {
transform: translateX(0) scale(0);
}
10% {
transform: translateX(10px) scale(0.5);
}
20% {
transform: translateX(20px) scale(1);
}
}
example
also css write only for firefox on chrom it doesn't work
Related
I am encountering a problem where an animation that is set to run on click is happening instantly when it should have a delay, when I change the state from false to true manually I can see the transition working fine, however when implementing the onClick feature and clicking the element it does not have the animation-duration being applied.
does anyone know a work around or a best practise to getting this working?
Main.js
import React, { useState } from "react";
export default function Main() {
const [isToggled, setIsToggled] = useState(false)
function handleToggle() {
setIsToggled(!isToggled)
}
return (
<div className="menu"
onClick={handleToggle}
>
<img src={require("../resources/menu-dropdown.png")}
className={isToggled ? "menu--dropdown top--tile motion" : "menu--dropdown top--tile reverse--motion"}
/>
<img src={require("../resources/menu-dropdown.png")}
className={isToggled ? "menu--dropdown bottom--tile motion" : "menu--dropdown bottom--tile reverse--motion"}
/>
</div>
)
}
styles.css
.menu--dropdown {
width: 15%;
position: absolute;
}
.top--tile {
top: -10%;
right: -95%;
}
#keyframes top--motion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
transform-origin: 30% 70%;
}
}
.top--tile.motion {
animation-name: top--motion;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.top--tile.reverse--motion {
animation-direction: reverse;
animation-name: top--motion;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes bottom--motion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-45deg);
transform-origin: 40% 60%;
}
}
.bottom--tile {
top: -7.5%;
right: -95%;
}
.bottom--tile.motion {
animation-name: bottom--motion;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.bottom--tile.reverse--motion {
animation-direction: reverse;
animation-name: bottom--motion;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
Using this example, is there a way to stop this CSS animation to a fixed point on the screen? So for instance, it's moving across and I decide to have it stop like 20px from the top right of the screen. Is this possible with just CSS?
.bird {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells.svg);
background-size: auto 100%;
width: 88px;
height: 125px;
will-change: background-position;
animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
}
.bird--one {
animation-duration: 1s;
animation-delay: -0.5s;
}
.bird-container {
position: absolute;
top: 20%;
left: -10%;
transform: scale(0) translateX(-10vw);
will-change: transform;
animation-name: fly-right-one;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.bird-container--one {
animation-duration: 15s;
animation-delay: 0;
}
#keyframes fly-cycle {
100% {
background-position: -900px 0;
}
}
#keyframes fly-right-one {
0% {
transform: scale(0.3) translateX(-10vw);
}
10% {
transform: translateY(2vh) translateX(10vw) scale(0.4);
}
20% {
transform: translateY(0vh) translateX(30vw) scale(0.5);
}
30% {
transform: translateY(4vh) translateX(50vw) scale(0.6);
}
40% {
transform: translateY(2vh) translateX(70vw) scale(0.6);
}
50% {
transform: translateY(0vh) translateX(90vw) scale(0.6);
}
60% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
100% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
}
<div style="width:100%;">
<div class="bird-container bird-container--one">
<div class="bird bird--one"></div>
</div>
</div>
https://jsfiddle.net/14ndk5xg/
By changing the VW to a lower number, you can get it to stop a certain distance from the right side of the screen. If you always want the bird to stop when it's travelled approximately 90% of the screen width then you can change the VW to 90.
With the way it's currently setup, it's not easy to make it stop at a certain amount of pixels.
By setting your code like below at 50% and removing the higher percentages, you can get the bird to fly 90% to the right and fly up to the upper right corner.
50% {
transform: translateY(-20vh) translateX(90vw) scale(0.6);
}
I have two transform operations (rotate and translate) and I want to make transition for translate only (rotate have to be instant).
Some suggestions? I prefer pure css.
Use keyframes to reach your desired effect, in addition to animation-fill-mode to keep the computed styles when the animation is finished.
.object {
width: 50px;
height: 50px;
background-color: #F00;
animation-fill-mode: forwards;
}
.object:hover {
animation: move 1s;
animation-fill-mode: forwards;
}
#keyframes move {
0% {
transform: translateY(0px) rotate(0deg);
}
1% {
transform: rotate(45deg);
}
100% {
transform: translateY(25px) rotate(45deg);
}
}
<div class="object"></div>
I'd like to spin an image and I came across this video https://www.youtube.com/watch?v=nD8xqlh6Esk which gave a very simple way to spin a div on a click. I thought this would be a great method to spin an image on a page load with minimal css so tried using a :after as opposed to a :click (with 720 deg) but that didn't work. Has anyone got this approach to work on a page load rather than on a click? I've seen other methods but they need quite a bit more css.
Detail provided
[Apparently my youtube link is to a football match although for me it's to a LevelUp Tuts CSS Experiments #1 - Card Flipping Effect video.]
Basically, he flips a card through a simple transform on a hover as follows:
<div class="card"></div>
.card {
background: blue;
width: 200px;
height: 200px;
}
.card:hover {
transform: rotateY (90deg);
}
So you can spin the div with a single line, a transform, on a hover. There's no need for keyframes.
Try this:
div {
width: 100px;
height: 100px;
background: red;
animation: spin 2s infinite;
-webkit-animation: spin 2s infinite;
}
#keyframes spin{
to{
transform: rotate(360deg);
}
}
#-webkit-keyframes spin{
to{
transform: rotate(360deg);
}
<div id="d"></div>
EDIT: is this more like what you wanted?
div {
width: 100px;
height: 100px;
background: red;
animation: spin 2s forwards;
-webkit-animation: spin 2s forwards;
}
#keyframes spin{
to{
transform: rotateY(90deg);
}
}
#-webkit-keyframes spin{
to{
transform: rotateY(90deg);
}
}
<div id="d"><img src="http://img4.wikia.nocookie.net/__cb20120208185721/logopedia/images/5/54/Barclays_Premier_League_logo_(shield).gif" width="100px" height="100px"></div>
You need animation as well, not just transition:
http://jsfiddle.net/rudiedirkx/AB277/95/
The magic:
.card {
animation: spinn 5s linear infinite;
/* you don't need transition at all */
}
#keyframes spinn {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(720deg); }
}
For some reason, Chrome still needs prefixes.
More info on css-tricks.
this animates the object as soon as the css and the html load:
(http://jsfiddle.net/oemtt7cr/)
#-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(720deg);
}
}
#keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(720deg);
}
}
.container {
-webkit-perspective: 2000px;
}
.card {
margin: 20px;
background: #990;
width: 200px;
height: 200px;
animation: spin 5s ease;
-webkit-animation: spin 5s ease;
}
<div class="container">
<div class="card">flipy</div>
</div>
Use .card:hover instead of .card:after if you like the animation start when user move in with cursor.
http://jsfiddle.net/AB277/90/
.card {margin 20px;
background: blue;
width: 200px;
height:200px;
transition: all 5s;
}
.card:hover {
transform: rotateY(720deg);
}
Or if you like the animation at page load, use the following script.
http://jsfiddle.net/AB277/93/
<div id="card"
</div>
var elm = document.getElementById('card');
elm.classList.add('cardMove');
#card {margin 20px;
background: blue;
width: 200px;
height:200px;
transition: all 5s;
}
.cardMove {
transform: rotateY(720deg);
}
I have a bit of CSS3 animation which works perfectly in all the browser which support CSS3 except safari. Weird isn't it? Ok here's my code:
HTML
<div class="right">
<div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>
CSS
.landing .board .right {
width: 291px;
height: 279px;
background: url('../images/landing/key-pnl.png');
bottom: 16px;
right: 250px;
position: absolute;
}
.landing .board .right .key-arm {
position: absolute;
left: 44px;
top: 18px;
width: 41px;
height: 120px;
}
/*=== Key Arm Animation ===*/
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes keyarm {
0% { -moz-transform: rotate(0deg); }
5% { -moz-transform: rotate(-14deg); }
10% { -moz-transform: rotate(0deg); }
}
#-ms-keyframes keyarm {
0% { -ms-transform: rotate(0deg); }
5% { -ms-transform: rotate(-14deg); }
10% { -ms-transform: rotate(0deg); }
}
#-o-keyframes keyarm {
0% { -o-transform: rotate(0deg); }
5% { -o-transform: rotate(-14deg); }
10% { -o-transform: rotate(0deg); }
}
#keyframes keyarm{
0% { transform: rotate(0deg); }
5% { transform: rotate(-14deg); }
10% { transform: rotate(0deg); }
}
.right .key-arm{
-webkit-transform-origin: 12px 105px;
-moz-transform-origin: 12px 105px;
-ms-transform-origin: 12px 105px;
-o-transform-origin: 12px 105px;
transform-origin: 12px 105px;
-webkit-animation: keyarm 8s ease-in-out 0s infinite;
-moz-animation: keyarm 8s ease-in-out 4s infinite;
-ms-animation: keyarm 8s ease-in-out 4s infinite;
-o-animation: keyarm 8s ease-in-out 4s infinite;
animation: keyarm 8s ease-in-out 0s infinite;
}
Ok this doesn't work in Safari as I said, there's no movement whatsoever.
Also, still and only in Safari, the key-arm div shows only if you resize the screen! It's there in the DOM but for some reason it doesn't show up!
What am I doing wrong?
Thanks
Mauro
UPDATE: Ok from your answers I got that #keyframes is not supported on Safari 4. It's strange because on the same page I have an animation that works using #keyframes!
here's the CSS code:
.board .rays{
background: url("../images/landing/rays.gif") no-repeat 0 0 red;
height: 381px;
left: 251px;
opacity: 1;
top: 80px;
width: 408px;
position: absolute;
}
.board .bottle{
background: url("../images/landing/bottle.gif") no-repeat 0 0 lime;
bottom: 30px;
height: 405px;
left: 276px;
width: 357px;
z-index: 1;
position:absolute;
}
/*=== Rays Animation ===*/
#-webkit-keyframes rays{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-moz-keyframes rays{
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
.board .rays{
-webkit-animation: rays 40s linear 0s infinite;
-moz-animation: rays 40s linear 0s infinite;
animation: rays 40s linear 0s infinite;
}
And the html:
<div class="board">
<div class="rays"></div>
<div class="bottle"></div>
</div>
Try it yourself in jsFiddle (if you have Safari 4) and you'll see
Found the solution. In Safari when you use Keyframes you need to use the whole percentage:
this won't work:
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
}
this will:
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }
}
Don't know why but that's the way Safari works! :)
I was having troubles with CSS3 animation working in Safari 6, but not in Safari 4 (4.0.5).
It appears that the shorthand notation will not work in Safari 4.
So this won't work :
-webkit-animation: rays 40s linear forwards;
But this will work :
-webkit-animation-name: rays;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
In situations where you're trying to animate transform on something as soon as it's injected into the DOM, I've had to add a very brief delay, like this:
animation: rays 40s linear 0.01s infinite;
I struggled with an animation working in Safari 14 (14.1.2), but not in Safari 15, and thought I'd add my findings here.
This css is part of the scrolling text loop here.
#banner-loop {
white-space: nowrap;
animation: loop-anim 5s linear infinite;
}
#keyframes loop-anim {
0% { margin-left: 0; }
100% { margin-left: -50%; }
}
I noticed that the animation "played", but didn't animate.
I tried the solutions from the other answers here, but nothing worked (including having the -webkit prefix). In the end the problem was solved by changing the start keyframe value to 0% instead of 0.
It looks like Safari can't handle the unit-less 0 shorthand in this case.
Try force quitting Safari and/or rebooting your phone (assuming you're on a phone).
Just had animations fail in Safari 15 for no apparent reason - very simple ones such as opacity and simple keyframes.
I noticed my phone was doing that thing where the white homescreen indicator gets permanently stuck on the long side of the phone even when holding it vertically. A reboot is usually needed to fix that.
Turns out rebooting also fixed the animations in Safari.
Another thing to remember with Safari is that low battery mode can affect animations and make them less smooth (and prevent muted autoplay videos from auto playing).
#-webkit-keyframes { <- let this symbol to the same line
} - >
This works on iphone 3 ios 6.1.6
with -webkit- prefix on transform and animation