I am studying Css recently in w3schools and I can't completely figure out how does this example work.
I don't konw what's the difference or usage of the following 3 transition codes in this example
.button:after {
transition-duration: 0.4s;
}
.button:after {
transition: all 0.8s;
}
.button:active:after {
transition: 0s
}
It would be greatful if someone can help me out of this.
better learn from developer.mozilla
transition: <property> <duration> <timing-function> <delay>;
in your case
.button:after {
transition-duration: 0.4s;
}
here you will need to add
transition-property: font-size;
transition-duration: 0.4s;
transition-delay: 2s;/*if you want a delay*/
all means apply to all properties of the element
.button:after {
transition: all 0.8s;
}
.button:active:after {
transition: 0s
}
This makes the white box visible on click within 0 seconds.
.button:after {
transition: all 0.8s;
}
This makes the white box invisible after 0.8 seconds.
.button:after {
transition-duration: 0.4s;
}
This doesn't serve any real purpose in your given example, but could be used in combination with (for example) a :hover effect.
Related
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.
I have a simple question.
I would like to give an "all" animation to a text area, however I do not want it to animate the text shadow on focus.
How can I make exceptions when I'm using the following:
input[type=text]:focus {
background: #fff;
text-shadow: none;
transition:all 0.5s;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
}
You can also write like this, if you don't want overwrite the transition property :
input[type=text]:focus {
background: #fff;
transition:all 0.5s, text-shadow 0s;
-webkit-transition:all 0.5s, text-shadow 0s;
-moz-transition:all 0.5s, text-shadow 0s;
}
This is actually pretty simple, just set the rule for all of them, then set it again for just the text-shadow:
input[type=text]:focus {
background: #fff;
text-shadow: none;
transition:all 0.5s;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
transition:text-shadow 0s;
-webkit-transition:text-shadow 0s;
-moz-transition:text-shadow 0s;
}
With this code, if you change the text-shadow, it will instantly change, rather than animate. Like #Patrick commented, if you dont want the text-shadow to change at all, then make sure you don't edit that property.
I'm trying to use an opacity transition and it seems to work in all browsers except IE. IE 10 is supposed to support transitions, and it does... sometimes. I can't figure out why my code won't work. The first-letter code does not work in IE either. Is this not supported or am I doing something wrong?
<style type="text/css">
#piccode {
opacity:0;
-moz-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-duration: 1s;
-ms-transition-duration:1s;
-o-transition-duration: 1s;
}
#piccode:hover {
opacity: 1;
}
#postbody p:first-letter {
letter-spacing:1px;
line-height:0.5;
font-size: 25px;
font-family: 'Lovers Quarrel', cursive;
}
#postbody b {
color: #8b5a3c;
}
</style>
I don't know if it makes a difference, but if I delete the transitions, hovering continues to do nothing. I think my hover might be the problem... I'm sorry if I sound dumb here. I'm entirely self-taught!
For the transition, you forgot to specify which property to animate (for simplicity I used the shorthand property here):
#piccode {
opacity:0;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
And for first-letter the syntax with two colons :: is recommended (Older browser version should support the single colon syntax as well):
#postbody p::first-letter { /* ... */ }