I've built a slider with the following animations. Unfortunately the transitions between the slides last too long. I haven't found a proper property for setting the speed between switching the slides.
/* Keyframes */
#-webkit-keyframes animation_slides {
0%
{
opacity:0;
}
6%
{
opacity:1;
}
24%
{
opacity:1;
}
30%
{
opacity:0;
}
100%
{
opacity:0;
}
}
/* Animations on my ul li elements */
-webkit-animation-name: animation_slides;
-webkit-animation-duration: 30.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
&:nth-child(2)
{
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
&:nth-child(3)
{
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
&:nth-child(4)
{
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
&:nth-child(5)
{
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;
}
Can you please help me? Thank you very much in advance!
There is no 'speed' per say value, but there is 'duration' and 'delay'. It looks like you can change the value of -webkit-animation-duration: 30.0s; to whatever you wish and correspondingly change all the nth-child -webkit-animation-delays and -moz-animation-delays the same proportion to affect the 'speed' of the transition
For example this would make the transitions half as long:
/* Animations on my ul li elements */
-webkit-animation-name: animation_slides;
-webkit-animation-duration: 15.0s; /* A value I changed */
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
&:nth-child(2)
{
-webkit-animation-delay: 3.0s; /* A value I changed */
-moz-animation-delay: 3.0s; /* A value I changed */
}
&:nth-child(3)
{
-webkit-animation-delay: 6.0s; /* A value I changed */
-moz-animation-delay: 6.0s; /* A value I changed */
}
&:nth-child(4)
{
-webkit-animation-delay: 9.0s; /* A value I changed */
-moz-animation-delay: 9.0s; /* A value I changed */
}
&:nth-child(5)
{
-webkit-animation-delay: 12.0s; /* A value I changed */
-moz-animation-delay: 12.0s; /* A value I changed */
}
So long as the proportion between the total duration and nth-child delays stay the same, it will change speed accordingly
Related
I have a post component and this post component has a comment section. When I click comments I want to show the comments of users. I am able to show these comments, but I wanted to add a nice looking animation to make the transition between open and closed smoother. Unfortunately the animation doesn't get applied. Can someone tell me where I went wrong?
This is what it looks like. I click the comments text and then it displays the comments. Right now it opens without animations, despite the code I added below.
template code: I added the index to the class to make sure I get a nice stagger effect
<div #normalComments *ngIf="commentsDisplayed && comments">
<ng-container *ngFor="let comment of comments; let i = index">
<post-comment
class="comment-{{i}}"
[user]="user"
[comment]="comment"
[allMembersId]="allMembersId"
(sendDeletedComment)="deleteComment($event)">
</post-comment>
</ng-container>
</div>
SCSS code: I add the animation to every class that starts with comment- and the animation-delay depends on the index number of the element
[class^="comment-"] {
animation-name: fadeIn;
animation-duration: 1s;
}
.comment {
&-0 {
animation-delay: 1s;
}
&-1 {
animation-delay: 2s;
}
&-2 {
animation-delay: 3s;
}
&-3 {
animation-delay: 4s;
}
&-4 {
animation-delay: 5s;
}
}
#keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
use this code for your comment class animation
#for $i from 0 through 4 {
.comment-#{$i} {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: $i+1s;
}
}
indetead of
[class^="comment-"] {
animation-name: fadeIn;
animation-duration: 1s;
}
.comment {
&-0 {
animation-delay: 1s;
}
&-1 {
animation-delay: 2s;
}
&-2 {
animation-delay: 3s;
}
&-3 {
animation-delay: 4s;
}
&-4 {
animation-delay: 5s;
}
}
This question already has answers here:
CSS Auto hide elements after 5 seconds
(5 answers)
Closed 5 years ago.
I found this question CSS Auto hide elements after 5 seconds
and I need to know how to do the oposite of this.
Basically:
-Page loads with element hidden
-Wait 5 seconds
-Show element
I'm not very good with CSS so Any help would be nice!
#thingtohide {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
try this simple solution.
#showMe {
animation: cssAnimation 0s 5s forwards;
visibility: hidden;
}
#keyframes cssAnimation {
to { visibility: visible; }
}
<div id='showMe'>Wait for it...</div>
You can also use opacity insted of visibility
#showMe {
animation: cssAnimation 0s 5s forwards;
opacity: 0;
}
#keyframes cssAnimation {
to { opacity: 1; }
}
<div id='showMe'>Wait for it...</div>
You can run something like this. This sets the opacity to 0 and after a few seconds, it ramps it back to 100%. This option allows you to fine tune how quickly you want it to appear, giving you control over how much opacity the element would have and when in the timeframe it would have it.
#showMe {
opacity: 0;
-moz-animation: cssAnimation 5s;
/* Firefox */
-webkit-animation: cssAnimation 5s;
/* Safari and Chrome */
-o-animation: cssAnimation 5s;
/* Opera */
animation: cssAnimation 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id='showMe'>Wait for it...</div>
I'm trying to display an element, wait 1second and then fade out the element using css3 transitions.
Here is what I have:
.el {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
animation-timing-function: ease-in;
animation-duration: 225ms;
}
#-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
.el {
opacity: 0;
-webkit-animation-duration: 500ms;
-webkit-animation-name: fadeout;
-webkit-animation-delay: 1000ms;
-moz-animation-duration: 500ms;
-moz-animation-name: fadeout;
-moz-animation-delay: 1000ms;
animation-duration: 500ms;
animation-name: fadeout;
animation-delay: 1000ms;
}
I thought animation-delay would be the way to go, but doing it like this, the element appears after 1000ms instead of fading out after 1000ms.
Any idea how to delay the fadeout?
Thanks!
Why not add the extra delay time to your animation duration:
-webkit-animation-duration: 1500ms;
Where ~66%(1000ms) of the time is a delay:
#-webkit-keyframes fadeout
{
0% { opacity: 1; }
66% { opacity: 1; }
100% { opacity: 0; }
}
Note that i used this time as an example. You can calculate the percentage of the delay yourself
jsFiddle
I hope this is what you meant.
Even though there is already a correct answer, let me enumerate what you options are.
You want an element to begin at opacity of 1, and stay like this for a second. Then, you want to fade it away to opacity of 0 during 0.5 s. And you want it to stay at opacity 0 forever.
The problem here is that the initial state and the final state are differents, so the base state of the element can not be both (of course!).
If we make the base state opacity 0, the problem is at the beginning. We can solve it as in nkmol solution. (starting the animation right away. We can also leave the animation only for the 0.5s where the opacity changes, and change the opacity usiong animation-fill-mode: backwards;
Also, you could set the base element to opacity 1. Then the problem is to make the final opacity 0; that can be done set animation-fill-mode: forwards;
I have a keyframe animation and I believe IE 10 is the only IE browser capable of playing this animation. How could I go about removing this animation if the browser is IE and keeping it otherwise (Chrome, Safari, FireFox)?
The animation looks like this:
// Animations
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity: 0;
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
animation-duration: .5s;
}
.fade-in.one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
animation-delay: 1.2s;
}
Fiddle
http://jsfiddle.net/mkerny45/6yYC9/
use conditional comments to turn the animations off. you'll need to use javascript to attach the cc's for ie10, and it should look like this:
<!--[if !IE]><!-->
<script>
// detect ie10, attach class of ie10 to html element
if(/*#cc_on!#*/false){document.documentElement.className+=' ie10';}
</script>
<!-->![endif]-->
<style>
.ie10 .animationclass{}
</style>
you can view gist here: https://gist.github.com/jalbertbowden/5174156
working demo of script here: http://dev.bowdenweb.com/ua/browsers/ie/ie10-detection-via-cc.html
i'v find IE10 does not read conditional comments anymore. .
so you can use jQuery:
if ($.browser.msie && $.browser.version == 10) {
$("html").removeClass("someClass");
}
or JavaScript:
if(Function('/*#cc_on return document.documentMode===10#*/')()){
document.documentElement.className ='';
}
I have the following animation code...
.a {
background: url(../Images/experience-1.jpg) center center no-repeat red;
z-index: 7;
-webkit-animation-delay: 3s;
-webkit-animation-duration: 5s;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: 3s;
-moz-animation-duration: 5s;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: 3s;
-o-animation-duration: 5s;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: 3s;
animation-duration: 5s;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
.b {
background: url(../Images/experience-2.jpg) center center no-repeat yellow;
z-index: 6;
-webkit-animation-delay: 18s;
-webkit-animation-duration: 5s;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: 18s;
-moz-animation-duration: 5s;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: 18s;
-o-animation-duration: 5s;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: 18s;
animation-duration: 5s;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
.c {
background: url(../Images/experience-3.jpg) center center no-repeat pink;
z-index: 5;
-webkit-animation-delay: 33s;
-webkit-animation-duration: 5s;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: 33s;
-moz-animation-duration: 5s;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: 33s;
-o-animation-duration: 5s;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: 33s;
animation-duration: 5s;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
.d {
background: url(../Images/experience-4.jpg) center center no-repeat green;
z-index: 4;
-webkit-animation-delay: 48s;
-webkit-animation-duration: 5s;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: 48s;
-moz-animation-duration: 5s;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: 48s;
-o-animation-duration: 5s;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: 48s;
animation-duration: 5s;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
.e {
background: url(../Images/experience-5.jpg) center center no-repeat orange;
z-index: 3;
-webkit-animation-delay: 63s;
-webkit-animation-duration: 5s;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: 63s;
-moz-animation-duration: 5s;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: 63s;
-o-animation-duration: 5s;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: 63s;
animation-duration: 5s;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
.f {
background: url(../Images/experience-6.jpg) center center no-repeat purple;
z-index: 2;
-webkit-animation-delay: 78s;
-webkit-animation-duration: 5s;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: 78s;
-moz-animation-duration: 5s;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: 78s;
-o-animation-duration: 5s;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: 78s;
animation-duration: 5s;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
...and what I want to do is to make it easier in future to change the values.
Just to explain that each class is applied to a div with a background image and each div is absolutely positioned on top of each other. So fading out the top div will show the other div below it.
The initial animation delay is 3 seconds and then the duration for each div is always 5 seconds.
But for each class I'm delaying the animation by the same amount of time it takes the previous animation to finish.
So the .b{} class is set to delay by 18 seconds. The way this is worked out is: the first animation has a 3 second delay + 5 second duration, which equals 8 seconds in total + 10 seconds extra for the user to properly see the next image.
So the c.{} class is set to delay by 33 seconds. And again the algorithm is: the second animation has a 18 second delay + 5 second duration, which equals 23 seconds in total + 10 seconds extra for the user to properly see the next image.
So this is the premise of the animation and I need to work out how to automate this via Sass (in case the client says "you know what, I want the duration to be 10 seconds now").
Thanks in advance for any help you can give me.
Step 1. Wrap it in a mixin, track duration with variables
For starters, you can wrap the whole block in a mixin and use some variables (global, so be careful) to track total duration and animation index:
$queue-max-z-index: 7;
$queue-total-delay: 0;
$queue-index: 0;
#mixin queue-animation($class, $color, $delay: 0, $duration: 5s, $viewing-time: 10s) {
.#{$class} {
background: url(../Images/experience-#{$queue-index + 1}.jpg) center center no-repeat $color;
z-index: $queue-max-z-index - $queue-index;
-webkit-animation-delay: $queue-total-delay + $delay;
-webkit-animation-duration: $duration;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: $queue-total-delay + $delay;
-moz-animation-duration: $duration;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: $queue-total-delay + $delay;
-o-animation-duration: $duration;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: $queue-total-delay + $delay;
animation-duration: $duration;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
$queue-total-delay: $queue-total-delay + $delay + $duration + $viewing-time;
$queue-index: $queue-index + 1;
}
}
Now you can set up your animations like this:
#include queue-animation(a, red, 3s);
#include queue-animation(b, yellow);
#include queue-animation(c, pink);
#include queue-animation(d, green);
#include queue-animation(e, orange);
#include queue-animation(f, purple);
The function default values represent global defaults that you can override for an individual animation. Also note that it automatically tracks the count (index) of animations set up and the total duration of said animations, so you can alter the duration or delay on any one and all the subsequent animations will be updated.
Step 2. Clean up those prefixes
To refactor a little more, you could include a little helper I use for vendor prefixed properties:
// Apply common prefixes to a property.
#mixin prefix($property, $value, $apply-to: property, $prefixes: -webkit -khtml -moz -ms -o) {
#if $apply-to == property {
#each $prefix in $prefixes {
#{$prefix}-#{$property}: $value;
}
} #else if $apply-to == value {
#each $prefix in $prefixes {
#{$property}: $prefix + -$value;
}
} #else if $apply-to == both {
#each $prefix in $prefixes {
#{$prefix}-#{$property}: $prefix + -$value;
}
}
#{$property}: $value;
}
And now your function looks like this:
#mixin queue-animation($class, $color, $delay: 0s, $duration: 5s, $viewing-time: 10s) {
.#{$class} {
background: url(../Images/experience-#{$queue-index + 1}.jpg) center center no-repeat $color;
z-index: $queue-max-z-index - $queue-index;
#include prefix(animation-delay, $queue-total-delay + $delay);
#include prefix(animation-duration, $duration);
#include prefix(animation-name, fadeout);
#include prefix(animation-fill-mode, forwards); /* this prevents the animation from restarting! */
$queue-total-delay: $queue-total-delay + $delay + $duration + $viewing-time;
$queue-index: $queue-index + 1;
}
}
Step 3. Use the animation shorthand
Going a step further, you can use the animation shorthand:
#mixin queue-animation($class, $color, $delay: 0s, $duration: 5s, $viewing-time: 10s) {
.#{$class} {
background: url(../Images/experience-#{$queue-index + 1}.jpg) center center no-repeat $color;
z-index: $queue-max-z-index - $queue-index;
#include prefix(animation, fadeout $duration ($queue-total-delay + $delay) forwards);
$queue-total-delay: $queue-total-delay + $delay + $duration + $viewing-time;
$queue-index: $queue-index + 1;
}
}
Humble disclaimer
I am still relatively new to Sass, so my advice is subjective and may not be in line with best practices. It's up to you how far you're happy to go with this, though, so feel free to ignore or modify any suggestions that make you feel uncomfortable.
Don't bother, there's a Compass plugin that will do it for you. That exact same code is being pulled into the Compass Core for the next release, so soon you wont even need to use a plugin. You get the added advantage that other people will help keep your animations code up-to-date. While you're at it, you can pull in the Compass port of Dan Eden's Animate.css.