I have a keyframe animation, that infinitly loops.
-webkit-animation: fade 3s ease-in-out infinite;
#-webkit-keyframes fade {
0% { opacity: 0; -webkit-transform: rotate(0deg);}
20% { opacity: 1; -webkit-transform: rotate(360deg);}
100% { opacity: 0; -webkit-transform: rotate(360deg);}
}
How can I delay each ilteration of the loop. im aware I can delay teh entire animation, but this only occurs once. I wish to do it everytime.
Unfortunately there is no current option to easily put a delay between the iterations, but instead you can add another stop with the same values (as I commented), and increase the duration:
#keyframes fade {
0% { opacity: 0; transform: rotate(0deg); }
10% { opacity: 1; transform: rotate(360deg); }
50% { opacity: 0; transform: rotate(360deg); }
100% { opacity: 0; transform: rotate(360deg); }
}
.selector {
animation: fade 6s ease-in-out infinite; /* increased duration */
}
Demo at http://jsfiddle.net/PW8Ur/2/
If you need scripted control over when you want to restart an animation, you could have a look at: http://css-tricks.com/restart-css-animation/
Related
am looking for a solution to make some animations on an item when we try to load the next one.
Here is what i have:
Before i click i have this :
After Click:
I want to show the image in background when i click on the list element at the right side (Man, Woman...).
The backgroud image is hidden on the right, it exceeds the screen and this one is resized.
I need to hide the backgroundimage without resizing the screen, and show it when click with animation.
CSS:
img.slider__bg {
width: 100%;
position: absolute;
transform: translateX(100%);
-webkit-transform: translateX(100%);
transition: transform .5s 4s;
&.showBg {
animation: showBg 0.5s forwards;
-webkit-animation: showBg 0.5s forwards;
}
&.hideBg {
animation: hideBg 0.5s forwards;
-webkit-animation: hideBg 0.5s forwards;
}
#keyframes showBg {
100% { transform: translateX(0%); }
}
#-webkit-keyframes showBg {
100% { -webkit-transform: translateX(0%); }
}
#keyframes hideBg {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
#-webkit-keyframes hideBg {
0% { -webkit-transform: translateX(0%); }
100% { -webkit-transform: translateX(100%); }
}
}
Use conditional rendering to display the background image when you click. You need to declare a state to identify whether you clicked or not.
EDIT: So, for some reason, the effect did not work/apply when running it locally. But, it works fine when I deployed it to GH pages. Does anyone know why this is?
I have text laid out in a circle that I want to rotate about itself. On plain HTML/CSS/Javascript, it works just fine and I get the desired result. Also, when I tried it out separately on this Codepen it works as well.
However, when I try to run this on the .rotating-circle div every style gets applied except for the animation. Not sure if this is relevant but I am using the CircleType js library to create this circular text.
import React, {useEffect, useRef} from 'react'
import CircleType from 'circletype'
function RotatingCircle() {
const rotatingCircle = useRef();
useEffect(()=> {
new CircleType(rotatingCircle.current).radius(100)
}, [])
return (
<div className="rotating-circle">
<p className="circle" id="rounded-text" ref={rotatingCircle}>
AND THE WORLD KEEPS GOING AROUND AND AROUND AND AROUND
</p>
</div>
)
}
export default RotatingCircle
Here is the SCSS:
.some-class{
.rotating-circle{
font-size: 1rem;
z-index: -999;
font-weight: bold;
color:$secondary;
display: block;
// background: #000;
max-width: 100%;
max-height: 300px;
// border-radius: 50%;
margin-top: -250px;
-webkit-animation: spin1 30s infinite linear;
-moz-animation: spin1 30s infinite linear;
-o-animation: spin1 30s infinite linear;
-ms-animation: spin1 30s infinite linear;
animation: spin1 30s infinite linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 80%;
}
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
#-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
#-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
#-keyframes spin1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
Also, just wanted to add that the .some-class class is applied to an element that this component is nested in.
I have the following code:
#keyframes sonar-wave {
0% {
transform: scale(1.00);
opacity: 0;
}
50% {
transform: scale(1.15);
opacity: 0.5;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
When this triggers, I see a "pause" before the scale continues. I would like a smooth scaling animation. Fiddle here:
https://jsfiddle.net/Lztxfho9/
What am I doing wrong?
That's because you didn't specify a timing function, So the browser will default to ease
change it to
animation: sonar-wave 2s linear forwards;
I'm setting up some predefined animation classes to animate on scroll. They all work, except one I've called slideUp, which seems to behave exactly like slideDown. The animations look exactly like they sound, and are using transforms like so:
#keyframes slideUp {
from {
-webkit-transform: translateY(10%);
transform: translateY(10%);
}
to {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
#keyframes slideDown {
from {
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
Seems that no matter what, calling slideUp generates an animation that looks like slideDown, and I can't see any error in my keyframes, nor in execution.
Example of execution:
animation: slideUp 600ms $transition-ease-in 1 forwards, fadeIn 500ms linear 1 forwards;
Thanks!
Edit: I changed the name slideUp to slideup and it started working. This is a from-scratch project, so I can guarantee no conflicts in my code that would have caused that. Any ideas?
Here is an example that may help you. I made it with your animation. Hope this will help. https://jsfiddle.net/ssr3axtr/2/
html :
<div class="box box--1">
</div>
<div class="box box--2">
</div>
CSS :
#keyframes slideUp {
from {
-webkit-transform: translateY(10%);
transform: translateY(10%);
}
to {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
#keyframes slideDown {
from {
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.box{
display:inline-block;
width:50px;
height:50px;
background:blue;
transform:translateY(0);
}
.box--1{
animation: slideUp 1s linear 0s infinite forwards;
}
.box--2{
animation: slideDown 1s linear 0s infinite forwards;
}
I think your animation shorthand lists properties in the wrong order. Try this:
#keyframes slideUp {
from {
-webkit-transform: translateY(10%);
transform: translateY(10%);
}
to {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
#keyframes slideDown {
from {
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.btn {
background: green;
color: white;
padding: 2em;
display: inline-block;
animation: 600ms cubic-bezier(0.1, 0.7, 1.0, 0.1) 1 forwards slideUp;
}
<div class="btn">button</div>
Is there a way to pulsate opacity from 0 to 1 (repeat) slowly with a CSS3 keyframes transformation, infinitely? Or does this require jQuery or Javascript with a transition opacity inside a class that is toggled on an interval?
I'm trying to work it into my orbit transformations (below). (I'm working on a live wallpaper background effect with multiple opaque images floating in a sidebar image on an installer application I'm building in Objective C.)
.orbit1
{
animation: myOrbit 200s linear infinite;
}
.orbit2
{
animation: myOrbit2 200s linear infinite;
}
#keyframes myOrbit1
{
from { transform: rotate(0deg) translateX(150px) rotate(0deg) }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg) }
}
#keyframes myOrbit2
{
from { transform: rotate(360deg) translateX(250px) rotate(-360deg) }
to { transform: rotate(0deg) translateX(250px) rotate(0deg) }
}
You can do it by adding multiple animations to the element, for example:
.orbit1
{
/* added for example reasons */
position :absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
background: red;
/* ---------- */
animation: myOrbit1 20s linear infinite, Pulsate 4s linear infinite;
}
#keyframes myOrbit1
{
from { transform: rotate(0deg) translateX(150px) rotate(0deg) }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg) }
}
#keyframes Pulsate {
from { opacity: 1; }
50% { opacity: 0; }
to { opacity: 1; }
}
<div class="orbit1"></div>
I'ved modified some of your parameters (like the speed of the animation and the opacity minimum) and added some spoof styling for the element for the purpose of the example.
Edit
I had originally thought that the multiple rotate() declarations were in error, but #vals informed me why it was there (to create a counter rotation on the object). I've updated the answer, and learned something new.