This question already has answers here:
Using CSS for a fade-in effect on page load
(4 answers)
Closed 6 years ago.
Can you apply a fade transition to a div on load using CSS only? I have a div, which initially should be transparent and after a few seconds should change to yellow. I know it is possible to do this on state change (e.g. hover). Can anyone help?
Cheers
#content {
background-color: #FF0;
height: 100px; width: 100px;
-webkit-transition: background-color 10000ms linear;
-moz-transition: background-color 10000ms linear;
-o-transition: background-color 10000ms linear;
-ms-transition: background-color 10000ms linear;
transition: background-color 10000ms linear;
}
<div id="content"></div>
#keyframes fadeInAnimation{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
#content {
animation-name: fadeInAnimation;
animation-duration: 500ms;
animation-fill-mode: forwards;
background-color: #FF0;
height: 100px; width: 100px;
-webkit-transition: background-color 10000ms linear;
-moz-transition: background-color 10000ms linear;
-o-transition: background-color 10000ms linear;
-ms-transition: background-color 10000ms linear;
transition: background-color 10000ms linear;
}
Related
<!doctype html>
<html>
<head>
<style type="text/css">
#i {
height: 20px;
background-color: #999;
/*return animation*/
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
#i:hover {
height: 300px;
background-color: #F00;
/*begin animation*/
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
</style>
</head>
<body>
<div class="c" id="i" >Hover Me</div>
</body>
</html>
See above. How do I get the box 'hover me' to end its bck-color to red, on the /return animation/, using only CSS. It understandably returns to #999, but I dont want that.
Basically: Start box 20px, #999 >> expand 300px >> Contract 20px, #red
Also is there a way to pass a value to a css property when using transitions like this:
-webkit-transition: background-color:red 0.4s ease-in 0.3s
Thanks for your help. Just trying to understand the very basics.
You can do something very close (but maybe not enough) using CSS animations.
Set an animation (not transition) on the element, and pause it. Set it's fill mode to forwards. On hover set the animation to running. When the animation ends, the end state remains.
The caveat - if somebody stops hovering before the animation is done, it will remain in it's current position until hovered again.
#i {
height: 20px;
background-color: #999;
animation: animation 0.4s ease-in 0.3s;
animation-fill-mode: forwards;
animation-play-state: paused;
}
#i:hover {
animation-play-state: running;
}
#keyframes animation {
0 {
height: 20px;
background-color: #999;
}
50% {
height: 300px;
}
100% {
height: 20px;
background-color: red;
}
}
<div class="c" id="i">Hover Me</div>
I think we don't have anything like this right now, you probably use JavaScript to do this kind of things.
I had to use a combination of jquery add and remove classes. wishing it could have been pure css though.sigh
Hopefully this simple code helps someone. If anyone has something better esp with pure css... id be happy to learn. #obi Cheers and thanks to all.
<body>
<div class="c" id="i" >Hover Me</div>
<style>
.c {height: 20px; background-color: #999;}
/*----begin animation-----------------------------------*/
#i:hover {
height: 300px;
background-color: #0F0;
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-moz-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-ms-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-o-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
/*----return animation-----------------------------------*/
.c_returnAnime {
height: 100px;
background-color: #F00;
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-moz-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-ms-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-o-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
</style>
<script>
$('#i').hover(
//always add class before removing other or errors
function(){ $(this).addClass('c_returnAnime') },
function(){ $(this).removeClass('c') }
)
</script>
</body>
</html>
I have a hovering effect on an image. If you mouseover it and stay there with the mouse, the transition will be execute with its given duration.
I have also done the correct transition when you leave the spot.
Now, i want that the hover transition starts with the given duration, no matter if you just hovered over the image for a quick 1millisecond.
Is this only possible with javascript?
.example { position: absolute;
left: 0;
height:320px;
bottom: 0;
width: 100%;
background: #000;
background-color: rgba(255, 255, 255, 0.4);
opacity:0;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
-ms-transition: background-color 2s ease-out;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
text-align: center;
line-height: 299px;
text-decoration: none;
color: #000000;
font-size:30pt;
}
.image:hover .example { background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:1;
}
With this, if i hover over the image, my text and background colors animating in and when i leave the image the text and background color is animating out. It works okay. (even though, my above code is a bit unsorted for now)
So, all i want is that the fading in and out animation will be fully executed even if i just hover fast over the image and back.
I think it is not possible is it? (with css only i mean)
I am afraid, you would have to use a bit of Javascript because as far as I know, it is not possible to do it without javascript.
Add a class on hover, and remove it on animation end. Refer to this answer to know how to do that - css3 animation on :hover; force entire animation
PS: I would have put this is a comment, but I don't have the privileges right now.
I am trying to allow a object to move down if either the bar or sidebar are hovered. I am trying the following code:
#sidebarcategoryshow:hover#sidebar:hover #sidebarcategoryshow{
margin-top: 200px;
z-index: 5;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
And basically I want #sidebarcategoryshow to move down if either one is hovered. Yet this does not seem to work, any idea? :( Currently it just is not working like it should.
You would need to use two separate selectors:
#sidebarcategoryshow:hover #sidebarcategoryshow,
#sidebar:hover #sidebarcategoryshow {
margin-top: 200px;
z-index: 5;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
If you are using LESS, you could use the following:
#sidebarcategoryshow, #sidebar {
&:hover #sidebarcategoryshow {
/* ... */
}
}
im trying to make a smooth transition between a display:none; property and then the same property but displayed i guess i almost want it to fade? without the use of JS.
i have written this which hides all of the titles when not hovered over the image:
#title-0
{
display:none;
-o-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
transition:all 0.5s linear;
}
and i have written this which shows the titles when hovered:
#portfolio-0:hover > #title-0 {display:block;}
but the effect when hovering is just static and instant
i appreciate all the help, thank you!
You can't transition the display property, if I understand correctly what you're trying to achieve, it can be done with opacity:
#title-0
{
opacity: 0;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-webkit-transition:opacity 0.5s linear;
transition:opacity 0.5s linear;
}
#portfolio-0:hover > #title-0 {display:block;}
Here is working example using opacity. Also added a height transition in case desired: http://jsfiddle.net/Ty2nm/1/
#title-0 {
height: 0;
opacity: 0;
-o-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
transition:all 0.5s linear;
overflow: hidden;
}
#portfolio-0:hover > #title-0 {
height: 20px;
opacity: 1;
}
You cannot do transition on the display property. You can set the opacity of your #title-0 to 0 instead:
#title-0
{
-o-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
transition:all 0.5s linear;
opacity: 0;
}
then revert the opacity to 1 on hover of #portfolio-0:
#portfolio-0:hover > #title-0 {opacity: 1}
Fiddle Demo
How would I make it so that if you hover over an image, the entire image changes to the color black (the image link must be in the HTML tag as the sizes and images are different)?
Here's what I have:
HTML:
<img src="http://www.floral-directory.com/flower.gif" class="image" />
CSS:
.image {
width: 250px;
}
.image:hover {
background: #000000;
}
The easiest way to do this is to wrap the img element in another, for example a span:
<span class="imgWrap">
<img src="http://www.floral-directory.com/flower.gif" class="image" />
</span>
And couple that to the CSS:
.imgWrap {
display: inline-block;
border: 1px solid #000;
}
.imgWrap:hover {
background-color: #000;
}
img:hover,
.imgWrap:hover img {
visibility: hidden;
}
JS Fiddle demo.
And, if you'd like to make it a little prettier, using transitions to fade in/out:
.imgWrap {
display: inline-block;
border: 1px solid #000;
background-color: #fff;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap img {
opacity: 1;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap:hover {
background-color: #000;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
img:hover,
.imgWrap:hover img {
opacity: 0;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.
The HTML
<div class="change_bg">
<img src="http://eofdreams.com/data_images/dreams/image/image-07.jpg" >
</div>
The CSS
.change_bg img{
max-width : 300px;
}
.change_bg{
width : 300px;
height : 300px;
float:left;
}
.change_bg img:hover{
visibility : hidden;
}
.change_bg:hover {
background : #bc7d89;
}
Live Example # http://cdpn.io/Bmthc