I have the following code in css:
.item {
opacity: 0;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
}
.item.seen {
opacity: 1;
}
when I add the class seen to an .item, the opacity of the item turn from 0 to 1 with transition.
but when I remove the class seen from an .item the opacity transition (from 1 to 0) also runs.
is there any way to make the transition run when .seen is added but not when it is removed?
.item {
opacity: 0;
}
.item.seen {
opacity: 1;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
fiddle: http://jsfiddle.net/qcxt3evn/ (with opacity set to 0.2 just for the purpose of seeing the clickable element)
Also, don't forget to place the standard property after the vendor-prefixed (the latter might be non-compliant to the specification)
In this case, the class which contains the transition never change.
If you setup your transition in the class which toggle, the transition won't be effective on the remove.
.item {
opacity: 0;
}
.item.seen {
opacity: 1;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
DEMO
To go beyond, as also well explained in the article Ordering CSS3 Properties from Chris Coyier, you should be careful about the order of you prefixes, with the very good example attached to the article:
http://codepen.io/css-tricks/pen/pqgKH
#wrongway { background: #ccc; padding: 30px;
border-radius: 30px 10px;
-webkit-border-radius: 30px 10px;
}
#rightway { background: #ccc; padding: 30px;
-webkit-border-radius: 30px 10px;
border-radius: 30px 10px;
}
Related
I'm trying to make something like fullpage.js. I have an active element and previous element. When I'm scrolling I have transform property on the both blocks, one like
.active {
transform: translateY(0);
opacity: 1;
transition: all 1s ease;
}
And another is
.previous {
transform: translateY(100vh);
opacity: 0;
transition: all 1s ease;
}
Without transition they appear in a moment without any delay. But when I add transition they starting to blink because of the opacity. How can I make the block first to transform and then to lose it's opacity
You can simply define multiple transitions:
div {
width: 200px;
height: 200px;
background: orange;
opacity: 0.5;
transition: transform 0.5s ease 0s, opacity 0.5s ease 0.5s;
}
body:hover div {
transform: rotate(45deg);
opacity: 1;
}
<div></div>
CSS transition property not functioning as expected
I am trying to add different transitions for the different properties, but the transition seems to not be working, as I expected.
Here is my CSS code
* {
transition: all .5s ease-in-out;
transition: opacity 80ms linear;
transition: background .2s ease-out;
}
I am probably doing something really obvious wrong, but if you can help, I do appreciate it. Thanks in advance!
Declaring the same CSS property multiple times will result in previous declarations being overwritten, and only the last being kept. (Assuming they have identical specificity).
You can comma-separate transitions like so:
transition: all .5s ease-in-out, opacity 80ms linear, background .2s ease-out;
Demonstration:
* {
transition: all .5s ease-in-out, opacity 2s linear, background 4s ease-out;
}
div {
padding: 100px;
background-color: red;
color: white;
opacity: 0.4;
}
div:hover {
font-size: 20px;
opacity: 1;
background-color: blue;
}
<div>hover this</div>
I have created a button which transitions into a different colour when mouse hovers over.
I cannot figure out how to make the colour change back to its original when the mouse is no longer hovering.
I have tried many ways, which have not worked.
Is there another Psuedo-element which I could use? Any help would be really appreciated.
#cta-btn:hover {
background-color: #37A3BC;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
Add this code to your original cta-btn:
#cta-btn {
background-color: (enter your original bg color) ;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
Here's the CSS I'm using and I've tested it against the latest browsers.
.team-member {
padding: 15px;
background: #fafafa;
min-height: 150px;
width: 100%;
transition: linear background .5s;
border-radius: 3px;
overflow: auto;
}
.team-member:hover {
background: #eee;
transition: linear background .5s;
}
Also, you should also add vendor specific css prefix. For ex)
{
-moz-transition: linear background .5s;
-o-transition: linear background .5s;
-webkit-transition: linear background .5s;
transition: linear background .5s;
}
I have an element that is red in resting state, and green when the user hovers their cursor over it. I have it set to ease the transition for 0.4s.
Instead of having the colour transition straight from red to green, I'd like it to pass through yellow at the midway point. So when the user mouses over it, it goes from red to yellow to green in one smooth transition. Is this possible?
This is my current code.
.element {
background-color: red;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.element:hover {
background-color: green;
}
You can use the CSS #keyframes animation syntax.
#keyframes animate-color {
0% { color: red; }
50% { color: yellow; }
100% { color: green; }
}
element:hover {
animation: animate-color 0.4s forwards;
}
Change the 0.4s value to control how fast the animation runs.
Here's an example for Chrome using -webkit-animation and #-webkit-keyframes:
https://jsfiddle.net/ahm2u8z2/1/
Make sure you cover all browser possibilities as the syntax is different for Chrome, Firefox, Internet Explorer and Opera.
https://css-tricks.com/snippets/css/keyframe-animation-syntax/
Here's more information for configuring your animations in CSS3, you can control things such as animation-delay, animation-direction, and many more.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
Alteratively, if you're not up to using #keyframes (although I don't see why not), you can use pseudo elements to act as the middle color. All you need to do is control the delay of the transitions using transition-delay:
.element {
width: 100px;
height: 100px;
background-color: red;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
position: relative;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.element:before {
position: absolute;
width: 100%;
height: 100%;
content: "";
background: green;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
opacity: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.element:hover:before {
opacity: 1;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.element:hover {
background-color: yellow;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
<div class="element"></div>
you could use keyframes for this:
.element {
background-color: red;
height: 300px;
width: 300px;
}
.element:hover {
-webkit-animation: changeColor 0.4s forwards;
animation: changeColor 0.4s forwards;
}
#-webkit-keyframes changeColor{
0%{background: red;}
50%{background:yellow}
100%{background:green}
}
#keyframes changeColor{
0%{background: red;}
50%{background:yellow}
100%{background:green}
}
<div class="element"></div>
This works by adding the keyframe sequence when the element is hovered, and not during the actual element's creation (so the keyframes only work during the hovered stage).
The forwards declaration is used so that the animation will 'pause' on the '100%' keyframe, rather than looping back and 'finishing where it started'. I.e. the first keyframe.
Please note: Other prefixes will need to be included see here for more info.
This is the background image:
#logo
{background-image:url('logo.png');width:20px;height:23px;}
#logo:hover
{background-position:0 -23px;-webkit-transition: all 0.5s ease;}
#logo span
{margin-left:-3000px;}
<div id="logo"><span>logo</span></div>
This code gives me a slide effect (a vertical slide from the black S to the pink one) instead of the fade effect I'm looking for. Creating two images, would solve the issue, but that is not possible in this case.
How do I get the fade affect when using only one single image?
Try this - http://jsfiddle.net/Wds5z/4/
a, #logo {
background: url('http://i.stack.imgur.com/w5ZnN.png') 0 -23px;
width: 20px;
height: 23px;
display: block;
}
#logo {
background-position: 0 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#logo:hover {
opacity: 0;
}
#logo span {
margin-left:-3000px;
}