I am trying to add some animation for my CSS class
Here's code:
#primary_nav_wrap li a:hover:after {
height: 4px;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
background-color: #23a298;
bottom: 0;
content: "";
left: 0;
right:0;
margin-left:auto;
margin-right:auto;
position: absolute;
top: 96px;
width: calc(100% - 15px);
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
}
Everything is fine, but this part does not work:
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
Add this code to your a:after
#primary_nav_wrap li a:after {
height: 4px;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
bottom: 0;
content: "";
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 96px;
width: calc(100% - 15px);
-webkit-transition: background-color 0.4s ease-out;
-moz-transition: background-color 0.4s ease-out;
-o-transition: background-color 0.4s ease-out;
-ms-transition: background-color 0.4s ease-out;
transition: background-color 0.4s ease-out;
}
You don't put the transition effect on the hover, also, you didn't mention which style should get the transition so I gave it to the background-color
Example:
https://jsfiddle.net/7o2mw6ng/
Try placing the transition on the element without the hover applied:
#primary_nav_wrap li a:after {
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
}
Edit: You're changing the colour on the a tag so you need to apply the transition there.
#primary_nav_wrap ul a {
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
}
See jsfiddle here.
Related
Everything else is working with the transitions etc... however when it sets the background-color it does not fade in but just instantly changes the colour. Anyone have any ideas?
Fiddle: https://jsfiddle.net/0zortp3g/1/
menuBackground is the class that gets set.
CSS:
header {
width: 100%;
height: 100%;
top: 0;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
-o-transition: height 0.5s;
transition: height 0.5s;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
background-color: transparent;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
-ms-transition: background-color 1s ease;
-o-transition: background-color 1s ease;
transition: background-color 1s ease;
.header-toolbar {
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
top: 35px;
}
h1 {
&.header-logo {
img {
display: inline-block;
height: 72px;
line-height: 72px;
float: left;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
}
}
nav {
&.header-desktop-nav {
position: relative;
top: 25px;
ul {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.header-nav-links {
.home {
padding-right: 26px;
}
}
}
}
&.smaller {
height: 100px;
position: fixed !important;
top: 0px;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
&.homepage {
top: 42px;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
}
h1 {
&.header-logo img {
height: 45px;
line-height: 45px;
}
}
nav {
&.header-desktop-nav {
top: 10px;
}
}
.header-toolbar {
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
top: 50px !important;
float: right;
z-index: 1;
}
}
&.menuBackground {
background-color: #333333 !important;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
-ms-transition: background-color 1s ease;
-o-transition: background-color 1s ease;
transition: background-color 1s ease;
}
}
I created a simple effect that causes an image to change color on hover. Now I want to add transition-timing-function properties so the color transition fades in and out rather than an instant change, but I can't seem to get it to work. Any ideas?
Here's the code:
div {
position: relative;
display: inline-block;
-webkit-transition: all 500ms ease-out 1s;
-moz-transition: all 500ms ease-out 1s;
-o-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;
}
img {
width: 100%;
height: 100%;
}
div:hover::after {
position: absolute;
z-index: 1;
background-color: Indigo;
opacity: 0.4;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: '';
Thanks!
There are two problems with your code:
The ::after selector works as a separate element, so having the transitions on the div won't work, they need to be applied to the ::after.
The :hover::after selector needs something to transition from.
This should work:
div {
position: relative;
display: inline-block;
}
img {
width: 100%;
height: 100%;
}
div::after {
-ms-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;
position: absolute;
z-index: 1;
background-color: transparent;
opacity: 0.4;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: '';
}
div:hover::after {
background-color: Indigo;
}
Somebody also shared this code with me, which seems to do the same thing by wrapping the image in a span class:
.imghov {
display: inline-block;
background-color: #fff;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.13ss linear;
transition: all 0.3s linear;
}
.imghov img {
opacity: 1;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.imghov:hover {
background-color: indigo;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
imghov:hover,
.imghov:hover img {
opacity: 0.6;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
I have the following style on hover:
li:hover a {
left: 65px;
}
I know I can animate this with jQuery, but can it be animated with CSS3 alone?
This did not work:
li:hover a {
left: 65px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
You have to use this css:
li:hover {
left: 0px;
}
li:hover a {
left: 65px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
you have to set position if you want to use 'left' otherwise use 'margin-left'
here is an example: FIDDLE
I was playing with image swap hover effect with CSS3 transitions. Unfortunately, it only works in Chrome. I have seen lots of examples from CSS3 transition that works flawless in Chrome, Firefox and Safari, but not this time... :(
Where is the problem?
http://jsfiddle.net/kYZ9Y/
.logo {
float: left;
z-index: 1;
width: 325px;
height: 73px;
background: url(../img/logo.png) no-repeat;
position: absolute;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logo:hover {
z-index: 2;
opacity: 1;
background: url(../img/logo1.png) no-repeat;
}
Cheers!
just change the ease to ease-in-out like this
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
demo: http://jsfiddle.net/kYZ9Y/4/
for more Easing Functions go to http://easings.net/
the markup :
<div class="logo"></div>
the style :
.logo {
float: left;
z-index: 1;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
position: absolute;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.logo:hover {
z-index: 2;
opacity: 1;
background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
}
Can be done with pseudo elements.
.logo {
background: url(http://via.placeholder.com/300?text=Normal) no-repeat;
width: 300px;
height: 300px;
position: relative;
}
.logo:after {
content: "";
opacity: 0;
display:block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url(http://via.placeholder.com/300?text=Hover) no-repeat;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logo:hover:after {
opacity: 1;
}
https://jsfiddle.net/84bvybjs/
At least for Firefox, as per the documentation, background-image is not animatable.
Instead, try putting both images one on top of each other and animating the opacity property:
.logo {
float: left;
z-index: 1;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
position: absolute;
}
.logotop {
float: left;
z-index: 2;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
position: absolute;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logotop:hover {
opacity: 0;
}
HTML:
<div class="logo"></div><div class="logotop"></div>
Fiddle: http://jsfiddle.net/kYZ9Y/2/
I've got a <span> with some text in it and when you hover over it an image comes sliding down the page. So far so good. However, when your mouse accidentally hovers over the image, the animation will be stopped. I do not want that.
.coffee {
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;
z-index: 10;
}
.coffee:hover {
color: #B88A00;
}
.coffee img {
position: absolute;
display: block;
height: 100px;
width: 100px;
z-index: 1;
left: 280px;
top: 50px;
opacity: 0;
-webkit-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.coffee:hover img {
top: 150px;
opacity: 1;
}
Any help would be much appreciated.
As per i understand may be that's you want. Write like this:
HTML
<span class="coffee"><u>coffee</u></span>!
<img src="image.jpg" alt="Coffee!"/>
CSS
.coffee:hover + img{
top: 150px;
opacity: 1;
}
Check this http://jsfiddle.net/quLKb/2/
You can use the pointer-events attribute. If you set it to none, mouse events are omitted on elements with that css-rule applied.
.coffee img {
pointer-events: none;
}
Here's the modified example: http://jsfiddle.net/kFd9g/