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;
}
Related
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
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 am trying to create a menu that fades in/out when a button is clicked, and I am trying to do the animation using CSS transitions.
Here is a sample of what I want to achieve
#menu{
background: red;
display: block;
overflow: hidden;
position: absolute;
width: 182px;
top: 1em;
padding: 0;
height: auto;
opacity: 0;
/* The menu must not be clickable/cover the UI once hidden */
left: -100000px;
/*
The left property must change after the
opacity is zero and before it starts to
increase
*/
transition: opacity 0.25s 0.1s, left 0s; /* ??? */
-webkit-transition: opacity 0.25s 0.1, left 0s; /* Safari */
}
#menu.open{
opacity: 1;
left: auto;
}
http://jsfiddle.net/AzKAk/5/
Of course that only works half way, when the menu appears it DOES fade in, but when it has to fade out, this must happen after the element has its proper position.
Is it possible to do such thing using only CSS3?
I am assuming your intention is to have the menu appear/disappear in-place without any movement.
To do that you actually have to use a combination of two properties: opacity, and display.
The change in opacity will make the menu disappear, but once it reaches opacity:0 it will be invisible but still exist and receive user interaction.
So, you have to make sure that after the opacity transition is done, you have to change the display to none.
You can do this using the transitionend event (webkitTransitionEnd on Chome/Safari).
Your code would look something like this: http://jsfiddle.net/daniran/GfbVV/
I'm using jQuery in the example, but you can just as easily register the listeners directly using ontransitionend property;
I have to make a responsive website and as i shrink the browser to a specified size, i want the logo on the left to move to the right so that it is in the centre.
Here's an example of the transition i want to achieve. It is under "2.Animating your transitions" box1
I know that the transition starts on hover but is it possible to activate it when the browser is resized? or any alternative methods at all?
You can do this by using a mixture of CSS3 transitions and the #media queries.
div
{
height: 100px;
width: 200px;
position: relative;
background-color: #eee;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#media all and (min-width: 400px) {
div
{
background-color: #fc3;
left: 100px;
}
}
What this does is sets up the transitions on the element with relative position but obviously does not fire them (as there's no :hover or other selector) and declares a change in position (left: 100px;) when the browser is more than 400px wide. Use max-width for a "more than" value.
Obviously you need to change the values to what you need, but this is how it should be done.
http://jsfiddle.net/AvhvD/
Here is how i would do:
1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... }
2: #media (...) {
.logo {
margin-left: 0;
}
}
I was thinking that you could make a conditional statement in JavaScript and Jquery that would test the following to be true: If the browser window is resized and the size of the browser window is between a range, add a css class. If not remove the css class.
With this new class created, maybe you can make an animation using CSS3. I am not too familiar if this would work, but you could always just revert back to JQuery.
Furthermore, I don't know if transitions can be applied inside of media queries. If so, I am a big proponent and would highly recommend using them.
Hope I could help.
i am wondering if it is possible to set the height of a div with css animation.
I have a div that when you hover over it opens up but i want it to stay that height not shrink back to the original height.
Is this possible?
it needs to be done in pure css not javascript as its a website for college
You can do something like this:-
HTML:
<div class="divAnimate" onmouseout="this.className='setHeight'">Div Height Animation</div>
CSS:
.divAnimate {
border: 1px solid;
}
.divAnimate:hover {
height: 200px;
}
.setHeight {
height: 200px;
border: 1px solid;
}
Refer LIVE DEMO
You should use jQuery. CSS3 is not supported in all browsers. However, it is possible to use CSS3 to achieve this.
CSS:
#myDiv {
height:20px;/* initial height */
width:100px;
background:#aaa;
-webkit-transition: height .4s linear; /* you can replace 'height' with the attribute you are changing (eg: color, width...)*/
-moz-transition: height .4s linear;
-o-transition: height .4s linear;
-ms-transition: height .4s linear;
transition: height .4s linear;
}
#myDiv:hover {
height:100px; /* desired height */
}
HTML:
<div id="myDiv">
Hello World!
</div>
Hope this helps.
EDIT: Sorry, I didn't see that you needed it to stay that height. In order to do that, you would need to use something like onmouseout (or another event listener), which in the end would use Javascript anyway.
Yes, this is possible with just CSS3, but will only work in Safari/Chrome and recent versions of Opera, Mozilla Firefox, and IE10 as you need CSS3 animation keyframes to preserve the end-state of the transition.
http://jsfiddle.net/rPc88/3/