Other code that might be blocking the animation:
.projectLinks a{
background-color: var(--secondary-color);
color: var(--main-color);
padding: 2px 4px 4px 4px;
border-radius: 15px;
margin-right: 25px;
text-decoration: none;
Animation
transition-property: transform;
transition-duration: .3s;
}
.projectLinks a:hover{
background-color: var(--secondary-hover);
transform: translateY(-3px);
}
The hover color is applied but there is no transition. Why is that?
Here is a link to a codepen recreation of what I have:
https://codepen.io/Ancross/pen/yLKabeM
You will want to change the display property of the links. By default they are display inline.
To keep a similar look, I used display:inline
.projectLinks a{
background-color: rgb(0, 153, 255);
color: white;
padding: 2px 4px 4px 4px;
border-radius: 15px;
margin-right: 25px;
text-decoration: none;
transition-property: transform;
transition-duration: .3s;
display:inline-block;
}
.projectLinks a:hover{
background-color: rgb(1, 137, 228);
transform: translateY(-3px);
}
<div class='projectLinks'>
<a>Text</a>
</div>
You are using translateY on an inline-level element which can not be transformed due to some limitation. To use it correctly you can make it an inline-block
write this line in CSS like
.projectLinks a {
...
display: inline-block;
}
this will cause this to display inline but as a block for more info about inline element and block level element please refer below MDN docs:
inline elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
block level element: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
Related
trying to get my website to transition text-shadow on and off hover. When I use a transition without a specified property you can see font-size,color,etc transition. When specifying the text-shadow property in the transition no transition appears (currently using Chrome to test).
nav ul li a {
color: white;
transition: text-shadow 0.5s ease;
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
}
Are you sure you are not being deceived by the lightness of your color? I have amended your code and made it a workable snippet, and if I change the color to something more explicit, like red and yellow, you can actually see the effect. It's pretty feint, though. It seems like adding that property to the default does indeed work.
body {
background: black;
}
h1, h2 {
color: white;
text-shadow: 2px 2px 10px red;
transition: text-shadow 1s ease;
z-index: 1;
position: relative;
}
h2 {
text-shadow: 2px 2px 10px transparent;
}
h1:hover,
h2:hover {
text-shadow: 2px 2px 10px yellow;
}
<h1>Hover on me for text shadow!</h1>
<h2>Hover on me for text shadow!</h2>
You need to add shadow and transition in both declarations
Try this css code
nav ul li a {
color: white;
transition: 0.5s ease;
text-shadow: 2px 2px 10px rgba(255,255,255,0);
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
transition: 0.5s ease;
}
I've got some CSS code that works on Mozilla Firefox and doesn't on Google Chrome.
.lightBtn {
width: 500px;
height: 49px;
color: #000000;
background: white;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
display: inline-block;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.lightBtn:hover {
background: black;
color: white;
}
.lightBtn span {
display: inline-block;
position: relative;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.lightBtn span:after {
content: '>>';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.lightBtn:hover span {
padding-right: 25px;
}
.lightBtn:hover span:after {
opacity: 1;
right: 0;
}
<button class="lightBtn" ><span>Special effect</span></button>
<p>Hover over the div element above, to see the transition effect.</p>
In Mozilla font color transition works well changing from black to white and in Chrome it just changes to white after specified time. How can I fix it?
I checked basic transition and it works well, but while adding animation on hover, the transition of color itself doesn't work. This is animation I'm trying achieve. Originally it's without font color transition.
Both color transition and animation work in separate, but when combined, the font color transition isn't working (in Google Chrome). You can check on Mozilla what I'm trying to achieve.
I'm not thrilled with this answer, but a pared down version of your code (without losing any of the pseudo-elements or effects like other answers here) shows inconsistent results on mouseIn and mouseOut after many repeated attempts. Every 3rd or 4th hover, the pseudo-element content >> will start to appear immediately, and then slowly solidify. The rest of the times I hover, it has the lag you're experiencing.
In summation, this looks like a WebKit rendering bug. I've filed one here: https://bugs.webkit.org/show_bug.cgi?id=163078 so I will check back once some progress has been made on that.
This pared down version does remove the delay in your Special effect text from showing, though. I normalized the transition timings for that.
.lightBtn {
width: 500px;
height: 49px;
color: #000000;
background: white;
display: inline-block;
}
.lightBtn:hover {
background: black;
color: white;
}
.lightBtn span {
display: inline-block;
position: relative;
transition: 0.25s;
}
.lightBtn span::after {
content: '>>';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.25s;
}
.lightBtn:hover span {
padding-right: 25px;
}
.lightBtn:hover span::after {
opacity: 1;
right: 0;
}
<button class="lightBtn"><span>Special effect</span></button>
<p>Hover over the div element above, to see the transition effect.</p>
If you have
transition: all 0.25s;
There is no need for
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
the 0.25s will be the duration, in your case, it might be your browser version, becasue it works for me, and i'm using chrome.
Try to add this and see if it helps, since you said the time works, but no animation, so I would think it's becasue you still need the webkit prefix.
-webkit-transition: all 0.25s;
Well, let's go over a few things:
First you go on to declare transition-duration: 0.2s; and -webkit-transition-duration: 0.2s;, then you declare a transition: all 0.25s;, which overrides the value declared on the two previous properties.
You have all as the value for transition, this is not desirable as it hits performance.
If you set transition: all .25s; for setting the initial transition, then override the properties with a transition-property: background-color, border, box-shadow, color;, the transition should work just fine.
Here is a JSFiddle with your functional code.
If nothing done here works for you, then it might be that your browser is outdated, as already pointed out by everybody else.
Looks like same ff and chrome.
.lightBtn {
color: #000000;
background: white;
height: 49px;
border: 2px solid white;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
border-radius: 0px 8px 8px 0px;
font-size: 16px;
font-family: Audiowide;
display: inline-block;
transition: all 0.25s;
cursor: pointer;
}
.lightBtn:hover {
background: black;
color: white;
border: 2px solid rgba(12, 1, 29, 0.87);
box-shadow: 0 8px 16px 0 rgba(50, 116, 165, 0.2), 0 6px 20px 0 rgba(51, 93, 206, 0.19);
}
<a class="lightBtn">
Hi guys!
</a>
<button class="lightBtn">
Wassup
</button>
What happens if you strip out all the other stuff so that the code is as basic as possible? Does this work? If so then you probably need to sort through some specificity issues or something along those lines... or maybe your chrome version is out of date (though that seems rather unlikely).
This works for me in chrome and FF btw.
<!DOCTYPE html>
<html>
<head>
<style>
.lightBtn {
width: 100px;
height: 100px;
color: #000000;
background: white;
height: 49px;
border: 2px solid white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
border-radius: 0px 8px 8px 0px;
font-size: 16px;
font-family: Audiowide;
display: inline-block;
transition: all 0.25s;
cursor: pointer;
}
.lightBtn:hover {
background: black;
color: white;
border: 2px solid rgba(12, 1, 29, 0.87);
box-shadow: 0 8px 16px 0 rgba(50, 116, 165, 0.2), 0 6px 20px 0 rgba(51, 93, 206, 0.19);
}
</style>
</head>
<body>
<span class="lightBtn"></span>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
In every other browser the :active selector works even if there are elements nested inside the anchor tag, but IE11 seems special. (Microsoft Edge is apparently fine).
I'd expect when I click on the anchor tag, even if I click on the span, that the active selector will be applied.
http://jsfiddle.net/91ejuvjm/4/
HTML
<span>Click here</span>
CSS
a
{
display: block;
background-color: red;
}
a:active
{
background-color: blue;
}
It's an anchor tag and according to the spec it can be active, but it's like the span tag captures the click. I tried adding pointer-events:none; to the span tag and it ignores it which is against the spec and obviously a bug. I also thought maybe it was being selected since it's text, but -ms-user-select: none; doesn't help. Am I missing something obvious? How do I make clicks ignore the span tag in IE11?
#FighterJet had the solution for me pointer-events: none; on the nested element allows for the parent to take the event (for ie)
.squishy span {
position: absolute;
/*######################
# THE IMPORTANT PART #
######################*/
/*pointer-events: none;*/
display: inline-block;
white-space: nowrap;
top: 0;
left: 0;
vertical-align: middle;
line-height: 75px; /*change to btn height*/
width: 100%;
height: 100%;
-webkit-transition: transfrom .15s;
-moz-transition: transfrom .15s;
-ms-transition: transfrom .15s;
transition: transfrom .15s;
}
/* The solution! */
.solution {
pointer-events: none;
}
.btn-1 {
width: 75px;
height: 75px;
border-radius: 50%;
}
.squishy {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 10px;
color: #fff;
text-align: center;
background: #333;
box-shadow: inset 5px 5px 15px rgba(150, 150, 150, .5), inset -5px -5px 15px rgba(0, 0, 0, .5), 3px 3px 5px rgba(0, 0, 0, .7);
-webkit-transition: box-shadow .15s;
-moz-transition: box-shadow .15s;
-ms-transition: box-shadow .15s;
transition: box-shadow .15s;
}
.squishy:active {
box-shadow: inset 1px 1px 1px rgba(150, 150, 150, .5), inset -1px -1px 1px rgba(0, 0, 0, .5), 1px 1px 1px rgba(0, 0, 0, .7);
}
.squishy:active span {
-webkit-transform: scale(.95);
transform: scale(.95);
}
<h1>Broken in IE</h1>
<a class="squishy btn-1" type="button">
<span>O</span>
</a>
<h1>Works in IE</h1>
<a class="squishy btn-1" type="button">
<span class="solution">O</span>
</a>
I ran into this problem while making buttons. Now they work properly in IE http://codepen.io/FluidOfInsanity/pen/XjpEag
IE11 doesn't allow block elements I guess to function that way.
http://jsfiddle.net/91ejuvjm/7/
span
{
display: inline-block;
}
Another example that's probably more complete: http://jsfiddle.net/91ejuvjm/8/
Was playing around and changed the span to inline-block and it's fine.
EDIT:
I found a solution myself. The width and height in my a element should be put in the li element instead. So these:
width: 7vw;
height: 7vw;
Into the li:)
I have been at it for a while and I just can't figure it out. Internet explorer and Firefox seem to display my menu correctly, but Chrome doesn't.
Here's the html:
<div id="navigationmenu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
And here's the CSS.
I have a lot of stuff there, but I posted it all. Maybe something is interfering??
#navigationmenu a {
display: block;
text-transform: uppercase;
text-decoration: none;
color: #a2a2a2;
font-size: 1.1vw;
line-height: 7vw;
text-align: center;
width: 7vw;
height: 7vw;
border: 1px #a2a2a2 solid;
background: #ffffff;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: default;
margin-top: 0;
margin-bottom: 0;
margin-left: 2.1%;
margin-right: 2.1%;
transition-duration: 400ms;
transition-property: box-shadow;
transition-timing-function: ease;
-webkit-transition-duration: 400ms;
-webkit-transition-property: box-shadow;
-webkit-transition-timing-function: ease;
-o-transition-duration:400ms;
-o-transition-property: box-shadow;
-o-transition-timing-function: ease;
}
#navigationmenu a:hover{
background:#ffffff;
border: 1px #a2a2a2 solid;
-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
}
#navigationmenu li {
display: inline;
float: left;
margin: 0;
padding: 0;
}
I have already tried putting the a element margin and padding to 0 and applying the left and right margins to the li elements instead, but this made the li elements go too far from each other in Firefox (in Chrome they were a little better, but not ok).
Use the following css to add margin between the li elements in you ul
Live example here:
http://jsbin.com/piyilafupe/1/
#navigationmenu ul li {
margin-right: 50px; /* ADD YOU DESIRED DISTANCE HERE */
}
Notes: if for any reason you need to remove the margin on the most right element you can add this
#navigationmenu ul li:last-child {
margin-right: none;
}
Apply the margin to the <li> elements instead of the <a>
You can get rid of the following code in #navigationmenu a
margin-left: 2.1%;
margin-right: 2.1%;
Instead do this
#navigationmenu li {
display: inline;
float: left;
margin-left: 2px;
margin-right: 2px;
padding: 0;
}
I'd like to have a nice hover effect where I scale the width of list items slightly.
I also want to do this with an animation delay of 250ms. The problem is that the text gets stretched and shimmers.
How can one offset that effect?
I have a jsFiddle that shows the problem. It is the most noticeable in Chrome.
http://jsfiddle.net/LxywP/
Example CSS:
span {
display: inline-block;
background: #eee;
border: solid 1px #ddd;
padding: 8px 10px;
font-size: 1.2em;
font-weight: bold;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-transition: all 250ms;
-webkit-transition: all 250ms;
-o-transition: all 250ms;
transition: all 250ms;
}
span:hover {
background: darken(#E2F3E2, 8%);
text-decoration: none;
-ms-transform: scale(1.05, 1);
-mozilla-transform: scale(1.05, 1);
-webkit-transform: scale(1.05, 1);
transform: scale(1.05, 1);
}
As #Spudley mentioned in the comment, you shouldn't use scale since that stretches the element by definition. Instead you can add more left/right paddings to make the element wider. A problem with that is the element will be pushed to the right, you can solve that by adding "text-align: center" to its wrapper.
HTML:
<div>
<span>This text gets stretched</span>
</div>
CSS:
div {
text-align: center;
}
span {
display: inline-block;
background: #eee;
border: solid 1px #ddd;
padding: 8px 10px;
font-size: 1.2em;
font-weight: bold;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-transition: padding 250ms;
-webkit-transition: padding 250ms;
-o-transition: padding 250ms;
transition: padding 250ms;
}
span:hover {
background: darken(#E2F3E2, 8%);
text-decoration: none;
padding: 8px 20px;
}
Paste those into your jsfiddle and see the effect.
Another pro tip is to restrain from using "transition: all", specifying specific attributes to apply transition improves performance a lot. In this case you would use "transition: padding".