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.
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've just noticed that some CSS3 transitions have stopped working in Chrome (was working when I checked a few weeks ago) - seems fine in Safari.
I've definitely used this code before but maybe i'm overlooking something this time around?
The aim is just to have a smooth transition on hover:
Demo
HTML
<div></div>
CSS
div{
height:100px;
width:100px;
background:red;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
div:hover{
right:-10px;
position:relative;
height:100px;
width:100px;
background:red;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
Thanks for any advice
right doesn't work on static positioned element, you need to use position: relative; on load as well as you need to define right and set it to 0 or whatever you like.
Demo
div{
/* All the properties you have declared will go here plus === */
right:0; /* Add this */
position:relative; /* Add this */
}
Using position: relative; on load will help you transit your element on mouse out as well as on mouse over, so if you are setting position: relative; on :hover then your element will fail to transit on mouse out.
Also, I've noticed that you are not using any standard property for transition so make sure you use them.
using the following set of rules and style declarations
.tableRow.even, .tableRowNS.even, .odd { background-color: #F2F2F2; }
.tableRow.odd, .tableRowNS.odd, .even { background-color: white; }
.tableRow:hover,.noProject:hover,
.tableRow.even:hover, .tableRowNS.even:hover, .odd:hover,
.tableRow.odd:hover, .tableRowNS.odd:hover, .even:hover {
background-color: #E8E8E8;
transition: background-color .5s;
-webkit-transition: background-color .5s;
-o-transition: background-color .5s;
}
the mouseover color is working, but its not transitioning. am I approaching this incorrectly?
is there a problem with setting transition properties on multiple selectors like this?
I forgot to add the firefox specific css3 transition property: -moz-transition.
after adding that, we have the following css. Now everything works fine.
.tableRow:hover,.noProject:hover,
.tableRow.even:hover, .tableRowNS.even:hover, .odd:hover,
.tableRow.odd:hover, .tableRowNS.odd:hover, .even:hover {
background-color: #E8E8E8;
transition: background-color .5s;
-webkit-transition: background-color .5s;
-o-transition: background-color .5s;
-moz-transition: background-color .5s;
}
I'm trying to make a transition effect with background-color when hovering menu items, but it does not work. Here is my CSS code:
#content #nav a:hover {
color: black;
background-color: #AD310B;
/* Firefox */
-moz-transition: all 1s ease-in;
/* WebKit */
-webkit-transition: all 1s ease-in;
/* Opera */
-o-transition: all 1s ease-in;
/* Standard */
transition: all 1s ease-in;
}
The #nav div is a menu ul list of items.
As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+.
This should produce a fade effect for you in these browsers:
a {
background-color: #FF0;
}
a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<a>Navigation Link</a>
Note: As pointed out by Gerald in the comments, if you put the transition on the a, instead of on a:hover it will fade back to the original color when your mouse moves away from the link.
This might come in handy, too: CSS Fundamentals: CSS 3 Transitions
ps.
As #gak comment below
You can also put in the transitions into content #nav a for fading back to the original when the user moves the mouse away from the link
To me, it is better to put the transition codes with the original/minimum selectors than with the :hover or any other additional selectors:
#content #nav a {
background-color: #FF0;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
#content #nav a:hover {
background-color: #AD310B;
}
<div id="content">
<div id="nav">
Link 1
</div>
</div>
Another way of accomplishing this is using animation which provides more control.
/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
#keyframes onHoverAnimation {
0% {
background-color: #FF0;
}
100% {
background-color: #AD310B;
}
}
#content #nav a {
background-color: #FF0;
/* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
animation-duration: 1s; /* same as transition duration */
animation-timing-function: linear; /* kind of same as transition timing */
animation-delay: 0ms; /* same as transition delay */
animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
animation-play-state: running; /* can be set dynamically to pause mid animation*/
}
#content #nav a:hover {
/* animation wont run unless the element is given the name of the animation. This is set on hover */
animation-name: onHoverAnimation;
}
You can simply set transition to a tag styles and change background in hover
a {
background-color: #FF0;
transition: background-color 300ms linear;
-webkit-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
}
a:hover {
background-color: #AD310B;
}
<a>Link</a>