Is there a way to add a delay between each iteration?
EX: I want to add a first delay of 2s and an interation delay of 10s
Here is some code:
Code:
/* PROCESSAR AQUI! */
/*...*/
/* KEYFRAMES */
#-webkit-keyframes transitdescription {
15% { margin-left: 45px;}
}
#-webkit-keyframes transitimage {
0% { right: -100%;}
10% { right: -webkit-calc(93% - 350px);}
25% { right: -webkit-calc(90% - 350px);}
90% { right: -webkit-calc(90% - 350px);}
100% { right: -webkit-calc(200%);}
}
#-webkit-keyframes rotateimg {
50% {-webkit-transform: rotate(-10deg);}
}
#-webkit-keyframes pluswidth {
50% { width: 450px;}
}
#-webkit-keyframes leaveimage {
50% { width: 450px;}
}
Thanks.
There isn't such a property, although it has been suggested.
There are workarounds:
#-webkit-keyframes transitimage {
/* animation here */
10%, 100% { /* wait for 10 seconds without doing anything */ }
}
which is far from ideal.
You can see this related question for other workarounds.
Related
I have this Less mixin:
.keyframes (#name, #fromRules, #toRules) {
#-webkit-keyframes ~'#{name}' { from { #fromRules(); } to { #toRules(); } }
#keyframes ~'#{name}' { from { #fromRules(); } to { #toRules(); } }
}
I call for example:
.keyframes(fade-in,
{
opacity: 0;
},
{
opacity: 1;
}
);
The result is:
#-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
But how can I use Less mixins so I can use keyframes-selector different from 0%, 100% and also more than 2 keyframes-selector so result will look like this:
#keyframes fade-in {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
Thanks for help.
You could achieve this by passing the rules for the entire list of keyframe selectors (like 0%, 50%, 100% etc) as a single rule-set to the mixin along with the name of the animation.
Also as mentioned by seven-phases-max in the comments, #-webkit-keyframes ~'#{name}' is not required and it can simply be written as #-webkit-keyframes #name.
.keyframes (#name, #rules) {
#-webkit-keyframes #name { #rules(); }
#keyframes #name { #rules(); }
}
div{
.keyframes(fade-in,
{
0% { opacity: 0;}
50% { opacity: 1;}
100% { opacity: 0;}
});
}
CodePen Demo - Click on the eye icon in the CSS box to see the compiled output.
Note:
Passing rulesets to a mixin was introduced in Less v1.7.0 and hence the above code will not work with lower versions.
The Issue
I have two css keyframe animations which I am running on a single element:
.fade-bg {
animation-name: fade-bg-1, fade-bg-2;
animation-delay: 0, 6s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
The animations are defined as such:
#keyframes fade-bg-1 {
from {
opacity: 0;
background-image: url(image-1.jpg);
}
50% {
opacity: 1;
background-image: url(image-1.jpg);
}
to {
opacity: 0;
background-image: url(image-1.jpg);
}
}
#keyframes fade-bg-2 { /* Same as fade-bg-1 only with image-2.jpg */ }
The above works but when it gets to the second animation, it keeps repeating only that animation and does not loop back to fade-bg-1.
I've tried many different combinations of animation-direction but to no avail.
The Question
How do I make it so that the animation returns to fade-bg-1 and repeats itself?
The Example
EXAMPLE
Without javascript I don't think you can. However you can achieve the same effect using a single keyframe animation.
.fade-bg {
animation-name: fade-bg;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: forward;
}
#keyframes fade-bg {
0% {
opacity: 0;
background-image: url('image-1.jpg');
}
25% {
opacity: 1;
background-image: url('image-1.jpg');
}
50% {
opacity: 0;
background-image: url('image-1.jpg');
}
51% {
opacity: 0;
background-image: url('image-2.jpg');
}
75% {
opacity: 1;
background-image: url('image-2.jpg');
}
100% {
opacity: 0;
background-image: url('image-2.jpg');
}
}
EXAMPLE
I'm not sure this is possible with just css, but if you set up a setInterval method in JS cleverly, you could probably simulate the same thing by splitting the class into two.
var index = 1;
function switchBackground() {
if (index == 1) {
//this switches to the first background
var div = document.getElementById("yourDiv");
div.className = "fade-bg-1";
index = 0;
}
else {
//this switches to the second background
var div = document.getElementById("yourDiv");
div.className = "fade-bg-2";
index = 1;
}
}
setInterval(switchBackground(), 6000);
With .fade-bg-1 and .fade-bg-2 being the two animation classes.
Here's a jsfiddle if you want to play with it.
I asked this question almost 6 years ago, much has changed but no real solution with pure css.
The closest I could come up with was using a pseudo element to apply the second animation to.
Possible Solution:
Use a pseudo element like ::after and apply the second animation to it.
Code:
.animation--fade-bg, .animation--fade-bg::after {
width: 500px;
height: 500px;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
animation-iteration-count: infinite;
animation-duration: 3s;
}
.animation--fade-bg::after {
content: "";
display: block;
animation-direction: reverse;
}
.animation--fade-bg-1 {
animation-name: fade-bg-1;
}
.animation--fade-bg::after {
animation-name: fade-bg-2;
}
#keyframes fade-bg-1 {
from {
opacity: 0;
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
50% {
opacity: 1;
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
to {
opacity: 0;
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
}
#keyframes fade-bg-2 {
from {
opacity: 0;
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
50% {
opacity: 1;
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
to {
opacity: 0;
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
}
<div class="animation--fade-bg animation--fade-bg-1"></div>
I have this CSS animation which I'm trying to reverse the animation of based on a class being added to a DOM node. I've tried multiple things but with no avail. Here is the code I'm using, see below:
EXAMPLE
// Closed state
#-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } }
#-webkit-keyframes spin-close { 100% { -webkit-transform: rotate(-0deg); } }
#keyframes spin-close { 100% { transform:rotate(-0deg); } }
// Open state
#-moz-keyframes spin-open { 100% { -moz-transform: rotate(-90deg); } }
#-webkit-keyframes spin-open { 100% { -webkit-transform: rotate(-90deg); } }
#keyframes spin-open { 100% { transform:rotate(-90deg); } }
I don't know whether I'm looking at it all wrong? Please advise(a demo would be awesome).
Don't bother with javascript or animations. Use a CSS transition for this:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
transition:all 1s ease-out;
transform:rotate(0deg);
-webkit-transform:rotate(0deg); /* Safari and Chrome */
}
.image:hover {
transform:rotate(90deg);
-webkit-transform:rotate(90deg); /* Safari and Chrome */
}
http://jsfiddle.net/Ugc5g/892/
To reverse the rotation, you can simply change the degree value to the opposite value. For example, if the element is currently rotated 45 degrees clockwise, you can reverse the rotation by rotating it -45 degrees.
transform: rotate(-45deg);
i'm trying to make a simple animation using keyframes, but it only works in Chrome. Here is the code (i've only included keyframes code once, for shorter post):
#keyframes logokf {
0% {
background-image: url('gfx/logo1.png');
}
20% {
background-image: url('gfx/logo2.png');
}
40% {
background-image: url('gfx/logo3.png');
}
60% {
background-image: url('gfx/logo4.png');
}
80% {
background-image: url('gfx/logo1.png');
}
100% {
background-image: url('gfx/logo1.png');
}
}
#-webkit-keyframes logokf {
}
#-moz-keyframes logokf {
}
#-o-keyframes logokf {
}
#-ms-keyframes logokf {
}
#logo:hover {
float: left;
height: 75px;
margin: 28px 0 22px;
width: 276px;
/*animation-name*/
-webkit-animation-name:logokf;
-moz-animation-name:logokf;
-ms-animation-name:logokf;
-o-animation-name:logokf;
animation-name:logokf;
/*animation-duration*/
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
/*animation-timing-function*/
-webkit-animation-timing-function:lineare;
-moz-animation-timing-function:lineare;
-ms-animation-timing-function:lineare;
-o-animation-timing-function:lineare;
animation-timing-function:lineare;
/*animation-delay*/
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}
Any thoughts of how can i fix it or keyframes are not yet supported from other browsers?
background-image itself does not appear to be a valid transitionable property. It may happen to work in Chrome, but it's probably just lucky. When it's implemented, you'll be looking to use the crossfade capability in CSS images.
I would like to add a continuous fading effect in the background image of my wrapper. I know you can use keyframe animation to make a background image move arround, however, i was wondering if there is a fade effect possible using this technique.
http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/
For example:
#-webkit-keyframes fontbulger {
0% {
font-size: 10px;
}
30% {
font-size: 15px;
}
100% {
font-size: 12px;
}
Would be in my perfect situation something like...
#-webkit-keyframes fontbulger {
0% {
background: url(image.png, 1);
}
30% {
background: url(image.png, 0.5);
}
100% {
background: url(image.png, 1);
}
...for which 0.5 would be a visibility of 50%. Ofcourse, this suggestion does not work. Any way to accomplish this? I know you can apply transparency to RGB value's, but I would like to apply it to an image.
I am not aware of any way currently to directly affect the opacity of the background image as you seek. Two possible workarounds are:
1. Pure CSS3 way (not well supported yet)
Using a pseudo-element to supply the background-image allowed opacity to be used and keep the whole thing as pure css, but it did not work on webkit (which apparently does not support animation on pseudo-elements), only on the moz extension (I could not test IE10... feedback on that would be helpful). Compare Firefox with Chrome for this fiddle, which used this code:
HTML
<div class="bkgAnimate">Foreground text</div>
CSS
.bkgAnimate {
width: 300px; /*only for demo*/
height: 200px; /*only for demo*/
position: relative;
z-index: 1; /* make a local stacking context */
}
.bkgAnimate:after {
content: '';
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: url(src="your/image/path/file.png") no-repeat;
z-index: -1;
-webkit-animation: fontbulger 3s infinite;
-moz-animation: fontbulger 3s infinite;
-ms-animation: fontbulger 3s infinite;
}
#-webkit-keyframes fontbulger {
0% { opacity: 1; }
30% { opacity: 0.5; }
100% { opacity: 1; }
}
#-moz-keyframes fontbulger {
0% { opacity: 1; }
30% { opacity: 0.5; }
100% { opacity: 1; }
}
#-ms-keyframes fontbulger {
0% { opacity: 1; }
30% { opacity: 0.5; }
100% { opacity: 1; }
}
2. Cluttered HMTL solution (more cross browser friendly)
Changing to put an actual img tag in as the background seemed to be the only way to get webkit to behave, as this fiddle shows. But that may not be desirable for you. Code similar to above except:
HTML
<div class="bkgAnimate">Foreground text
<img class="bkg" src="your/image/path/file.png"/>
</div>
CSS change from above
Change the :after selector to .bkgAnimate .bkg and remove the content and background property from that code.