I am having trouble running a single animation using different divs. I just want to switch between different backgrounds using opacity in animation but i can't run it on different divs in a single animation
I have tried to make this animation on section container it was done but it does not give me transition with it I also want some transition so that's why I want to run this animation using different divs just like the one made on fivers homepage...!!
You can apply same animation on different elements by just giving all the elements(on which wanted animation) a same class and then selecting that class by dot operator and then in css rule define the animation property. Now, all elements will get this animation.
Suppose in html we have many divs on which we had applied some background color or image. And we want that there is a animation on all of them that firstly the background is light and with time background becomes dark(its original color).
So defining a single keyframe:-
HTML CODE
<div class="red same-animation"></div>
<div class="blue same-animation"></div>
<div class="green same-animation"></div>
<div class="yellow same-animation"></div>
CSS CODE
div{
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
opacity: 0 ;
}
.red{
background: red;
}
.green{
background: green;
}
.blue{
background: blue;
}
.yellow{
background: yellow;
}
.same-animation{
animation: change-opacity 5s ease-in-out 0s 1;
}
div:hover{
transition: all 5s;
opacity: 1;
}
#keyframes change-opacity {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
LINK OF CODE - https://codepen.io/aryansharma-2002/pen/mdpRoqW
So in this example firstly animation will be done in 5second to all divs such that there opacity will increase then all will disappear. Then if hover on any div then it will visible with transition. So tried to explain both concepts.
If any doubt or suggestion, please comment
Related
This is the code of the slide show in html
<div id="slideshow">
<img src="images/slideshow/1.png"/>
<img src="images/slideshow/2.png"/>
<img src="images/slideshow/3.png"/>
<img src="images/slideshow/4.png"/>
<img src="images/slideshow/5.png"/>
<img src="images/slideshow/6.png"/>
</div>
And this is my css for it
#slideshow{
width:1100px;
height:432px;
position:relative;
border:3px solid #404A7F;
margin:auto;
margin-top:35px;
overflow:hidden;}
#slideshow img{
position:absolute;
opacity:0;
animation:move 30s infinite;}
#keyframes move{
0%{opacity:1;}
100%{opacity:1;}}
#slideshow img:nth-child(1){
animation-delay:0s;}
#slideshow img:nth-child(2){
animation-delay:5s;}
#slideshow img:nth-child(3){
animation-delay:10s;}
#slideshow img:nth-child(4){
animation-delay:15s;}
#slideshow img:nth-child(5){
animation-delay:20s;}
#slideshow img:nth-child(6){
animation-delay:25s;}
But when the last image shows the slideshow doesn't start again from the first image.
Can someone please tell me what's wrong?
The problem is that you fade from 1 opacity to 1 opacity. After you correct that, it's till not okay, since you fade in during the whole period of 30 seconds, so an image is not fully faded in when the next image starts. And lastly, it doesn't wrap well, since it starts without any visible image.
Here is a fixed version of what I think you tried to achieve. Note I used colors instead of image for the demo, but they are still actual image elements, and it should work fine in your situation.
Basically what it does:
Shows the last image always, but with a z-index of -1, so it is always visible behind the others. This makes that image the one that is immediately visible.
Fades in quickly (during only a part of the 5 seconds in which the image is visible)
Fades out at the same pace, so fading out the prio to last image actually shows the last one.
The trick is to fix the animation so the images fade in and out at the right times within the animation.
I've commented the various frame in the animation to explain why I chose those values.
Possibly even better: I think it should be possible to show the first one too, by changing making the opacity 1 for the first 17%, then fade to 0 from 17% to 22%, and then fade to 1 again from 95% to 100%. But unfortunately, I'm leaving for Christmas dinner, and I can't try it out now. ;)
#slideshow{
width:1100px;
height:432px;
position:relative;
border:3px solid #404A7F;
margin:auto;
margin-top:35px;
overflow:hidden;}
#slideshow img{
position:absolute;
opacity:0;
animation:move 30s infinite;
width: 300px; height: 200px; /* Demo only */
}
#keyframes move{
/* Relevant information. You have 6 images, taking up 16.66% (say 17%) of the animation
time. So fading in needs to take place within this time.
Also, to wrap properly, the last image is put in the back and is always visible, so to
show that, you basically hide the prior one. Because of this, fading out has to
commence at 17% and has to have the same duration as the fading in.
*/
/* Start transparent */
0%{opacity:0;}
/* Move in a relatively short time to full opacity for a fade in effect. This can be anything from 0 to 17% */
5%{opacity:1;}
/* Stay at that level until after the next image has faded in at 100 / 6 ~ 17%. */
17%{opacity:1;}
/* Fade out at the same pace. This is needed for the animation to wrap seemlessly,
so 17% + 5% = 22% until full fade out */
22%{opacity:0;}
/* Stay there until the next round */
100%{opacity: 0};
}
#slideshow img:nth-child(1){
animation-delay:0s;
background-color: red;
}
#slideshow img:nth-child(2){
animation-delay:5s;
background-color: orange;
}
#slideshow img:nth-child(3){
animation-delay:10s;
background-color: yellow;
}
#slideshow img:nth-child(4){
animation-delay:15s;
background-color: green;
}
#slideshow img:nth-child(5){
animation-delay:20s;
background-color: blue;
}
#slideshow img:nth-child(6){
animation-delay:25s;
background-color: purple;
opacity: 1;
z-index: -1;
}
<div id="slideshow">
<img src="images/slideshow/1.png"/>
<img src="images/slideshow/2.png"/>
<img src="images/slideshow/3.png"/>
<img src="images/slideshow/4.png"/>
<img src="images/slideshow/5.png"/>
<img src="images/slideshow/6.png"/>
</div>
I'm trying to set a transition-delay to the overflow property of body when a div is clicked by adding a class to the body as follows:
$("div").click(function(){
$("body").addClass("no_overflow");
});
div{
background:lime;
height:2000px;
}
.no_overflow{
overflow:hidden;
}
body{
overflow:auto;
transition: overflow 0 2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>
However, this doesn't seem to work (there's no delay). Am I doing anything wrong here?
I know this can be achieved by using setTimeout function, but was wondering why can't this be achieved using css transitions? Are there any specific style properties to which css transitions can be applied?
There are many properties that can't be transitioned. overflow is among them; the render engine has no idea how to transition between "hidden" and "shown", because those are binary options, not intervals. This is the same reason why you can't transition between display: none; and display: block; (for example): there are no in-between phases to use as transitions.
You can see a list of properties you can animate here on Mozilla Developer Network.
You can simulate a delay with animation:
$("div").click(function() {
$("body").addClass("no_overflow");
});
div {
background: lime;
height: 2000px;
}
.no_overflow {
overflow: hidden;
/* persist overflow value from animation */
animation: 7s delay-overflow;
}
body {
overflow: auto;
}
#keyframes delay-overflow {
from { overflow: auto; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>
You'll have to apply a separate animation to .body if you want a delay on removeClass, and also to take care that the two animations don't overlap or they'll cancel each other out.
overflow isn't CSS animatable property. You can see full list of animatable CSS properties there.
In case someone is looking at the answer, like I was, for a way to animate the cropping of an element which requires overflowing - here is the solution that worked for me: the clip-path css property which is animatable and very versatile.
Here is a cool tool to play around with, in order to get the proper start / end values for an animation: https://bennettfeely.com/clippy/.
Dmitry's answer should be the only accepted answer, as it is a pure CSS solution applying delay to "non-animatable" properties. However it's worth to mention, that the CSS rule applying animation should be "triggerable" each time when it is needed.
For instance, the following code does not work:
#keyframes show-overflow {
from { overflow: hidden; }
}
.hideable, .overlay {
font-size: 36px;
height: 50px;
}
.hideable {
transition: height 2s;
overflow: visible;
animation: show-overflow 2s; /* this line should be in separate "triggerable" CSS rule to work */
}
.hideable.hidden {
height: 0;
overflow: hidden;
}
<button onclick="document.getElementById('hideable').classList.toggle('hidden')">
Clik HERE to hide/show the text below
</button>
<div id='hideable' class='hideable'>
This is the text to hide and show.
</div>
<div class='overlay'>
This is overlaying text
</div>
But after moving the marked property to a separate CSS rule, everything works as expected:
#keyframes show-overflow {
from { overflow: hidden; }
}
.hideable, .overlay {
font-size: 36px;
height: 50px;
}
.hideable {
transition: height 2s;
overflow: visible;
}
.hideable:not(.hidden) {
animation: show-overflow 2s; /* now this works! */
}
.hideable.hidden {
height: 0;
overflow: hidden;
}
<button onclick="document.getElementById('hideable').classList.toggle('hidden')">
Clik HERE to hide/show the text below
</button>
<div id='hideable' class='hideable'>
This is the text to hide and show.
</div>
<div class='overlay'>
This is overlaying text
</div>
It makes sense that you can't transition between binary attributes for example overflow: hidden; and overflow: visible but it would have been really nice if instead of "transitioning" then it would be like (in js pseudo code:
setTimeout("applyOverflowVisible()", transitionTime);
But of course you can do this yourself in JavaScript but then you are splitting the code between places and it can make it difficult to understand by someone else. I guess using things like React helps but even there I would want to avoid mixing css into the js.
I am designing a website theme in which I can only change the CSS, not the JavaScript or HTML source. There is a div element (not a link) that I want to show an APNG (like an animated GIF) background image when clicked. The problem is that the div doesn't remain active after the mouse button is up, so the animation doesn't usually get a chance to play through. Is there a way to prevent the background from going back to its normal state until after a delay?
I thought maybe a CSS #keyframe animation would work, but I'm not sure. The image is just an expanding gradient, so the image could be replaced with that (I think the image is easier because gradients aren't animatable either.
You can fake a click and keep the change 'active' by using a very long transition and adjusting the transition-delay on the initial and :active states.
.box {
width:100px;
height: 100px;
border: 1px solid grey;
margin: 1rem auto;
background-color: #f00;
transition-property: background-color;
transition-duration: 9999s;
}
/*.box:hover,*/
.box:active {
background-color: #00f;
transition-duration: 0;
transition-delay: 0s;
transition-timing-function: linear;
}
<div class="box"></div>
I have been experimenting and trying but have not been able to achieve the following. I'm sure the solution is simple, but I haven't hit it yet.
Let's say I want to animate an element (eg. div) when I apply a class (eg. active). And I want to reverse the animation when I remove the class (or toggle with another).
The properties I would like animate are scale (transform) and opacity.
Also, when entering the page, the element will not have any class, and should snap to its state, and not animate. It should only animate when explicitely adding or removing the class.
jsfiddle: http://jsfiddle.net/bertvan/9r98w/
HTML:
<div id="the-div"></div>
Trigger
JS:
$(function(){
$("a").click(function(){
$("#the-div").toggleClass("active");
});
});
CSS:
#the-div{
width: 200px;
height: 200px;
background-image: url("http://placeimg.com/200/200/any");
-webkit-transform: scale(0.7);
opacity: 0.5;
}
#the-div.active{
/* animate scale & opacity */
-webkit-transform: scale(1);
opacity: 1;
}
You are missing a transition property on the div selector:
running demo
code added:
#the-div{
transition: all 2s;
}
This is an example of a code to toggle class for changing size of a div with the transition-animation.
The HTML:
input-button with id="setRemoveClassBtn"
a div-tag with id="div1"
You will need a CSS-class-definition (notice that this is with the moz-prefix made to work in Firefox):
div{
width: 150px;
height: 150px;
background-color: rgb(250, 250, 150);
-moz-transition: width 5s, height 5s;
}
div.bigSizeDivs{
width: 250px;
height: 250px;
}
You will have to use javascript/jQuery to add/remove class. Here is an example with jQuery
$("#setRemoveClassBtn").click(function(){
$("#div1").toggleClass("bigSizeDivs");
});
How do I use CSS3 to fade out but not in. I.E. when I apply a class to an element I want the background to change color immediately with no delay or transition, and when I remove it I want the background to fade out according to a transition. I know it should be simple but i haven't managed to figure it out yet.
Specify the transition times for the element with and without the class.
.el {
background: red;
-webkit-transition: background .5s;
}
.el.hover {
background: blue;
-webkit-transition: 0;
}