I expected this to transition when entering and leaving the dimmed state but it only transitions when leaving. How can I make the transition work when entering it? I also tried ease-in and ease-out but these don't seem to make a difference.
.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
opacity: .5;
transition: opacity .5s ease-in-out;
}
Live example of problem http://codepen.io/ryanve/pen/doKdgW
Because you need to define the transition on .card:
.card {
transition: opacity .5s ease-in-out;
}
Instead on:
.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
transition: opacity .5s ease-in-out;
}
Change you css to this:
.is-dimmed-unless-active {
transition: opacity .5s ease-in-out;
opacity: 1;
}
.is-dimmed-unless-active:hover {
opacity: .5;
}
.card {
width: 60%;
margin: 1em auto;
padding: 1em;
color: crimson;
border: 3px dotted crimson;
}
body {
font-family: sans-serif;
background: white;
}
Related
Consider the following fiddle code
<div class="my-wrapper">
<input type="text"
placeholder="placeholder." >
<label >Press enter to save</label>
</div>
.my-wrapper {
input {
width: 200px;
height: 3em;
}
input:focus + label{
right: 20px;
opacity: 1;
color: #D3D3D3;
}
label{
line-height: 40px;
position: absolute;
right: 160px;
-moz-transition: 0.3s right ease;
-ms-transition: 0.3s right ease;
-o-transition: 0.3s right ease;
-webkit-transition: 0.3s right ease;
transition: 0.3s right ease;
z-index: 0;
opacity: 0;
}
}
I am seeing the forward transition on focus, I thought on blur the transition would go backwards, but I don't see it, can someone give me a hint on what I did wrong?
You can keep this simple by using transform instead of absolute values
.my-wrapper input {
width: 200px;
height: 3em;
}
.my-wrapper input:focus+label {
transform: translateX(0);
opacity: 1;
color: #D3D3D3;
}
.my-wrapper label {
position: absolute;
right: 10px;
line-height: 40px;
transform: translateX(-20px);
transition: 0.3s all ease;
z-index: 0;
opacity: 0;
}
<div class="my-wrapper">
<input type="text" placeholder="placeholder.">
<label>Press enter to save</label>
</div>
You have given transition: 0.3s right ease which will apply only to right property and not for opacity.
Change the transition property to transition: 0.3s all ease and the effect fades out smoothly on blur.
JsFiddle link
I was practicing css on an example i found. I tried to show the submenu above the nav with transition effects. I can change the position of the submenu on hover :
nav li:hover .menu-sub {
display: block;
transform: translateY(-100%);
}
I also modified the code to add a transition effect:
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
display: none;
color: #fff;
padding: 2em;
-webkit-transition: -webkit-transform 1.5s ease;
-moz-transition: -moz-transform 1.5s ease;
-o-transition: -o-transform 1.5s ease;
transition: transform 1.5s ease;
}
The position changed but I don't see any transition effect at all. What am i doing wrong ?
Please modify the transition to shown below, it was written wrong.
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
opacity:0;
overflow:hidden;
box-sizing:border-box;
height:0px;
color: #fff;
-webkit-transition: opacity 1.5s ease-out;
-moz-transition: opacity 1.5s ease-out;
-o-transition: opacity 1.5s ease-out;
transition: opacity 1.5s ease-out;
}
Transition does not work with display, instead use the below effect.
Codepen Demo
Where we can toggle the height from 0px to auto(full height) and opacity from 0(invisible) to 1(visible). You can see that we only see the animation on opacity, this will produce the best effect.
Use visibility:hidden then visible
display: none disables it in the active DOM and such elements with this CSS can't be selected for stuffs like animations.
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
visibility: hidden;
color: #fff;
padding: 2em;
transition: transform 1.5s ease;
}
nav li:hover .menu-sub {
visibility: visible;
transform: translateY(-100%);
}
Am trying to define css style in which when hover an element the opacity should change from 0 to 1.after a few seconds if unhover doesnt occur opacity should change its value to 0.
.selection:hover .player-icon {
opacity: 1;
transition-duration: 3s;
-moz-transition: opacity .25s ease-in;
-webkit-transition: opacity .25s ease-in;
-o-transition: opacity .25s ease-in;*/
}
.player-icon {
margin-left: 45%;
margin-top: 21%;
z-index: 999;
position: absolute;
width: 55px;
height: 55px;
opacity: 0;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
Use keyframe animation.
#keyframes show-hide {
0% { color: red; }
10% { color: white; }
90% { color: white;}
100% { color: red; }
}
.player-icon {
display: inline-block;
padding: 1em;
color: red;
background-color: red;
}
.player-icon:hover {
animation: show-hide 3s linear;
}
Put your cursor on the red rectangle more than 3 seconds.<br><br>
<div class="player-icon">Play</div>
I have an icon inside a div that I would like to fade in over x time, and fade out faster.
What I am trying to achieve is something like: transition: opacity 1s ease-in .1s ease-out;
So when I hover over project, bottom-icons should only ease-in the opacity to 1, but on offhover, it should return to opacity: 0 instantly.
What I have is:
.project {
position: relative;
&:hover {
.bottom-icons {
opacity: 1 !important;
}
}
.bottom-icons {
transition: opacity .5s ease-in;
//other stuff
}
I am trying to do this avoiding jQuery.
You can apply your transition on hover, like so:
.project {
position: relative;
&:hover {
.bottom-icons {
transition: opacity 1s ease-in;
opacity: 1 !important;
}
}
.bottom-icons {
transition: opacity .1s ease-out;
//other stuff
}
https://jsfiddle.net/8x184o6x/
It can be done pretty easily.
.project .bottom-icons {
transition: opacity 0.5s ease-out; /* leaving effect */
}
.project:hover .bottom-icons {
transition: opacity 1s ease-out; /* entering effect */
}
(Sorry that code is in pure CSS but I find it more universal.)
Transitions can be different for normal state and :hover state, and this is what we’re using here.
.project {
position: relative;
&:hover {
.bottom-icons {
opacity: 1 !important;
transition: opacity .5s ease-out;
}
}
.bottom-icons {
transition: opacity 2s ease-out;
//other stuff
}
Just set the icons to easy out of their normal state, and ease out of their hover state differently.
.project {
position: relative;
background: #eee;
text-align: center;
padding: 30px;}
.bottom-icons {
display: block;
background: #ddd;
padding: 5px;
opacity: 1 ;
transition: opacity .5s ease-out;
}
.project:hover .bottom-icons {
opacity: 0;
transition: opacity 2s ease-out;
}
<div class="project">
<div class="bottom-icons">
xxxxx
</div>
</div>
According to your explanation, you can use the following things:
ADD transition to the hover,
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
opacity : 1;
-moz-transition: opacity .25s ease-in-out;
}
div:hover {
opacity: .1;
-moz-transition:2s;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div>
</div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
I'm trying to make an affect on a box to drop 5px down when hovering.
It does work smoothly on Chrome but on firefox it's doesn't do the transition.
Please have a look at the next codepen using firefox and using chrome
<div class="test"></div>
.test {
background-color:blue;
width: 200px;
height: 200px;
#include transition(transform .3s 0 ease);
#include transform(translateY(0));
&:hover {
#include transform(translateY(5px));
}
}
Using Padding
Here's my preferred method using only padding:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
margin-top: 10px;
}
.transition {
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
Using Transform
Or if you still want to use transform:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10p));
-o-transform: translateY(10px);
transform: translateY(10px);
}
.transition {
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
As Kiran said already, each browser has varying support for directly using transform and transition. You can check who can use transforms here and transitions here.
Also take note that the transition wasn't applied to the :hover. It needs to be called at the base level (in this case at the div level).
Hi i guess will might help you out http://codepen.io/anon/pen/dHBni
check below css to find transitions property for different browsers
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
cursor: pointer;
}
.box:hover {
background-color: green;
}
for more information about transition http://css3.bradshawenterprises.com/transitions/