I am trying to add transition timing when switching the text alignment via :hover. The transition is added to the color properly, but not the text alignment.
example: Codepen
div {
background-color: #ff4000;
height: 300px;
width: 600px;
}
div:hover>h1 {
color: #ddd;
text-align: right;
transition: .6s ease-in !important;
}
<div>
<h1>Lorem Ipsum</h1>
</div>
I guess it was just the CSS Working Group decided not to implement it for whatever reasons. But there are other ways around, see the following demo by using position and transform tricks.
div {
background-color: #ff4000;
height: 300px;
width: 600px;
position: relative;
}
h1 {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
margin: 0;
transition: 0.6s ease-in;
}
div:hover > h1 {
color: #ddd;
left: 100%;
transform: translateX(-100%);
}
<div>
<h1>Lorem Ipsum</h1>
</div>
Another approach is to animate width.
div {
background-color: #ff4000;
height: 300px;
width: 600px;
}
h1 {
width: 0;
text-align: right;
white-space: nowrap;
margin: 0;
transition: 0.6s ease-in;
}
div:hover > h1 {
color: #ddd;
width: 100%;
}
<div>
<h1>Lorem Ipsum</h1>
</div>
transform: translateX()
text-align is not animatable but position and transforms are -- the latter being the better choice because it's less GPU/CPU intensive than the former. The following is a what was added as the first leg of the animation in the demo.
transform:translateX(300px);
transition: transform .6s ease-in;
Demo
div {
background-color: #ff4000;
height: 300px;
width: 600px;
}
h1 {
transform: translateX(0px);
transition: transform .6s ease-out;
}
div:hover>h1 {
color: #ddd;
width: 200px;
transform: translateX(300px);
transition: transform .6s ease-in;
}
<div>
<h1>Lorem Ipsum</h1>
</div>
I would like to transform the height of my .bar to 3px when hovering .wrapper. I know I have to use transition and transform, but I have no idea how to transform my child div by hovering his parent. At the moment, I transform just my parent div (it's clear why). How to transform height of my child by hovering my parent div (should be a bar coming up/down on the bottom of .wrapper)? Note that the parent div should not transform his dimensions, just the child!
.wrapper {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 200px;
height: 100px;
background-color: lightgreen;
transition: all 1s ease-in-out;
}
.wrapper:hover {
/*ON HOVER WRAPPER TRANSFORM HEIGHT OF BAR TO 3px*/
transform: scale(2);
cursor: pointer;
}
.bar {
width: 100%;
height: 0px;
background-color: blue;
}
.bar:hover {}
<div class="wrapper">
<div class="bar"></div>
</div>
Use the child selector .wrapper:hover>.bar:
.wrapper {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 200px;
height: 100px;
background-color: lightgreen;
transition: all 1s ease-in-out;
}
.wrapper:hover {
cursor: pointer;
}
.bar {
width: 100%;
height: 0px;
background-color: blue;
transition: height 200ms ease-in-out;
}
.wrapper:hover>.bar {
height: 3px;
}
<div class="wrapper">
<div class="bar"></div>
</div>
Use this CSS selector > to do that,
.wrapper {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 200px;
height: 100px;
background-color: lightgreen;
transition: all 1s ease-in-out;
}
/*.wrapper:hover {
transform: scale(2);
cursor: pointer;
}*/
.bar {
width: 100%;
height: 0px;
background-color: blue;
transition: 0.6s ease;
}
.wrapper:hover > .bar {
height: 10px;
}
<div class="wrapper">
<div class="bar"></div>
</div>
I have an image positioned within a div. When you hover over the div, it displays a caption over the top. The caption div has a background colour that I'd like to fade in. Is this possible? I've tried applying a transition, but it doesn't seem to work for block elements.
Here's the JSFiddle and code:
HTML
<div class="box">
<img src="http://bit.ly/1G1Pcbz" alt="coding">
<div class="overlay">
This is my caption overlay.
</div>
</div>
CSS
img {
height: auto;
max-width: 100%;
}
.box {
position: relative;
display: block;
width: 200px;
height: 117px;
background: #ccc;
transition: all 0.5s ease-in-out;
}
.overlay {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: red;
z-index: 9999;
}
.box:hover .overlay {
display: block;
}
Move the transition property from .box to .overlay, and animate opacity instead of display:
.overlay {
transition: all 0.5s ease-in-out;
opacity: 0;
}
.box:hover .overlay {
opacity: 1;
}
Fiddle
I have found the jQuery function .fadeIn() to be easy to use. Documentation can be found here:
http://api.jquery.com/fadein/
I have a very basic piece of HTML with the objective of animating from display: none; to display: block with opacity changing from 0 to 1.
I'm using Chrome browser, which uses the -webkit prefixes as preference and did a -webkit-keyframes transition set to make the animation possible. However, it does not work and just changes the display without fading.
I have a JSFiddle here.
<html>
<head>
<style type="text/css">
#myDiv
{
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
-webkit-transition: 350ms display-none-transition;
}
#parent:hover>#myDiv
{
opacity: 1;
display: block;
}
#parent
{
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}
#-webkit-keyframes display-none-transition
{
0% {
display: none;
opacity: 0;
}
1%
{
display: block;
opacity: 0;
}
100%
{
display: block;
opacity: 1;
}
}
</style>
<body>
<div id="parent">
Hover on me...
<div id="myDiv">
Hello!
</div>
</div>
</body>
</head>
</html>
The display doesn't work with CSS transition or animation.
Use opacity, visibility or z-index. You can combine all them.
Try to use visibility: visible in place display: block and visibility: hidden in place display: none.
And finally, combine z-index: -1 and z-index: 100 for example.
Good work ;)
If you are using #keyframes you should use -webkit-animation instead of -webkit-transition. Here is the doc for #keyframes animation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations.
See code snippet below:
.parent {
background-color: #000;
color: #fff;
width: 500px;
height: 500px;
padding: 5px;
}
.myDiv {
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #cec;
}
.parent:hover .myDiv {
display: block;
opacity: 1;
/* "both" tells the browser to use the above opacity
at the end of the animation (best practice) */
-webkit-animation: display-none-transition 1s both;
animation: display-none-transition 1s both;
}
#-webkit-keyframes display-none-transition {
0% {
opacity: 0;
}
}
#keyframes display-none-transition {
0% {
opacity: 0;
}
}
<div class="parent">
Hover on me...
<div class="myDiv">Hello!</div>
</div>
2016 UPDATED ANSWER
To reflect today's best practices, I would use a transition instead of an animation. Here is the updated code:
.parent {
background-color: #000;
color: #fff;
width: 500px;
height: 500px;
padding: 5px;
}
.myDiv {
opacity: 0;
padding: 5px;
color: #600;
background-color: #cec;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.parent:hover .myDiv {
opacity: 1;
}
<div class="parent">
Hover on me...
<div class="myDiv">Hello!</div>
</div>
You can not animate display property. You can try with visibility: hidden to visibility: visible
Just use position: fixed and drop the z-index: -5 at the end of the #keyframe animation (you can do any negative index....
CSS:
#keyframes fadeOut {
0% { opacity: 1
}
99% {
opacity: 0;
z-index: 1;
}
100%{
opacity: 0;
display:none;
position: fixed;
z-index: -5;
}
}
It's been tricky, it's been nasty, but here it is...
FadeOut (opacity) first
then truly hide (meaning: not covering up or catching any clicks, getting height: 0,...)
display: <whatever> is indeed no option.
But animating scaleY is. Or translate to far-far-away or the old classic: animating max-height (from a specific high px value) down to 0px…
For an earlier version of this snippet with some more general info on „back and forth animation on class toggle“ (and preventing that animation upon initial page load look here.
const div = document.querySelector('.target')
function toggleTarget() {
div.classList.add('active');
div.classList.toggle('play');
}
/* REF https://stackoverflow.com/a/49575979 */
/* REF https://stackoverflow.com/questions/26607330/css-display-none-and-opacity-animation-with-keyframes-not-working/64857102#64857102 */
body, html { /* eye candy */
background: #444; display: flex; min-height: 100vh; align-items: center; justify-content: center;
}
button { font-size: 4em; border-radius: 20px; margin-left: 60px;}
div { /* eye candy */
width: 200px; height: 100px; border-radius: 20px;
background: green; display: flex; align-items: center; justify-content: center;
font-family: sans-serif; font-size: 2em; color: white; text-align: center;
text-shadow: 0px 2px 4px rgba(0,0,0,.6);
}
/* using this extra .active class prevents that there is an animation already on loading */
.active {
animation: fadeAndHideBack 1s linear forwards;
}
.play {
opacity: 0;
/* learning curve: setting background "awaits" animation finish,
setting scale prematurely jumps to it, then doing animation from there */
animation: fadeAndHide 1s linear forwards;
}
#keyframes fadeAndHide {
0% { opacity: 1; }
99.9% { opacity: 0; max-height: 100px; }
100% { opacity: 0; max-height: 0; }
}
#keyframes fadeAndHideBack {
0% { opacity: 0; max-height: 0; }
0.1% { opacity: 0; max-height: 100px; }
100% { opacity: 1; }
}
<div class="target"></div>
<button onclick="toggleTarget()">
Toggle
</button>
You can use Javascript to change both the display properties and animation. You can't put display in #keyframes.
Start with the element display:none. Then simultaneously add display:block and animation:* classes.
Here's a working example with animation in/out.
add this css ;
.fade:not(.show) {
opacity: 1;
}
this work for me..
How about this example: jsfiddle
The issue was needing to use an animation rather than transition with keyframes
#-webkit-keyframes fadeAnimation {
0% {
opacity: 0;
}
25% {
opacity: 0.25;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#myDiv {
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
}
#parent {
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}
#parent:hover #myDiv {
-webkit-animation: fadeAnimation 6s;
}
You can't animate the display property. You can animate the visibility property. But visibility is not the same as display, as it will not remove the div element completely from the DOM (the property, visibility:collapse, can remove an element from the DOM, if the element is a table. This is an exception). You can instead animate CSS properties height and width. For instance, the below code will animate the square-block out.
function myAnimation(){
var square= document.getElementById('square');
if(square.getAttribute("class")==='square'){
square.classList.add('animation');
}else{
square.classList.remove('animation');
}
}
.square {
background-color:blue;
transform: translate(0, 0);
width: 100px;
height: 100px;
opacity: 1;
transition: all 0.5s ease-out;
}
.square.animation {
transform: translate(-260px, -260px);
width: 0;
height: 0;
opacity: 0;
transition: all 0.5s ease-in;
}
<html>
<body>
<div class="square" id="square"></div>
<br/>
<button onclick="myAnimation()">Animate</button>
</body>
</html>
FYI, I have used CSS transitions to animate the div. Hope this was useful.
Is it possible to add an opacity transition to CSS3 div overlay target?
JSFIDDLE: http://jsfiddle.net/pb7St/
#content {
background-color: #ccc;
height: 300px;
width: 300px;
z-index:1;
}
.overlaystyle {
height: 100px;
width: 100px;
background-color: #000;
left: 20px;
top: 20px;
position: absolute;
z-index:2;
opacity: 0;
-webkit-transition: opacity 1s ease;
}
#overlay {
display:none;
}
#overlay:target {
display:block;
opacity: 1;
}
Is there any other (better) way to close / hide the div? Currently I'm using:
href="#_"
Yes, there is:
JSFiddle Demo
CSS
.overlaystyle {
height: 100px;
width: 100px;
background-color: #000;
left: 20px;
top: 20px;
position: absolute;
z-index:2;
opacity: 0;
-webkit-transition: opacity 1s ease, visibility 1s 0s; /* added visibility transition */
}
#overlay {
//display:none;
visibility:hidden
}
#overlay:target {
//display:block;
visibility:visible;
opacity: 1;
}
EDITED to add transition to visibility with delay for fade-out effect. Personally, I'd go with JQuery. :)