I'm trying to give my flat icons a nice smooth scale effect on hover. I have tried this but that doesn't work (the zoom works, but no smooth effect). Any idea what the issue is?
Thanks,
.flaticon-city:before {
font-size: 64px !important;
margin-left: 0px !important;
color: #00ACDE;
transition: all .2s ease-in-out;
}
.flaticon-city:hover {
transform:scale(1.3);
}
and this doesn't work either:
.flaticon-city:before {
font-size: 64px !important;
margin-left: 0px !important;
color: #00ACDE;
}
.flaticon-city:hover {
transform:scale(1.3);
transition: all .2s ease-in-out;
}
I have tried this but that doesn't work (the zoom works, but no smooth effect). Any idea what the issue is?
The issue is simply that you specified transition for .flaticon-city:before, but apply the transform on .flaticon-city:hover.
Edit:
It “doesn’t work” in your example, because you have a problem with specificity:
#page-content #services .service i {
/* … */
transition: color .4s ease;
}
.flaticon-city:hover {
transform: scale(1.3);
transition: all 2s ease-in-out;
}
The first rule as higher specificity than the second one, but they both apply to the same i element that holds your icon – and therefor, you have now specified color as transition property only (because you have overwritten the transition), so changing the transform is not transitioned any more.
Just combine the two transitions into one:
#page-content #services .service i {
transition: transform 2s ease-in-out, color .4s ease;
}
Related
The problem I have is that when I set a:
.banner-division2 h2:hover {
-webkit-transition: 0.6 ease;
transition: 1s ease;
-webkit-transform: scale(1.2);
transform: scale(1.2);
color: #00C8BD;
}
It will only transition for the first part of the hover. In other words, once the mouse has exited the "hover" area, it will automatically go back to it's original form - however, I want it to transition ease back into it's original form (it isn't doing this).
Many thanks.
You need to put the transition property on the element you want the effect, not on the :hover.
Like this
h2 {
color: blue;
transition: 1s ease;
}
h2:hover {
color: red;
}
If this not work , try to add the value all on the transition property
You have defined the transition for the :hover state only. When not in :hover, no transition is defined - and ofc, none does happen. So split your rule:
.banner-division2 h2 {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.banner-division2 h2:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
color: #00C8BD;
}
This way, the transition targets your h2, not only your h2:hover.
I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image...
The CSS:
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: transparent;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.title a:hover {
background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
Take a look: http://jsfiddle.net/AK3La/
You can transition background-image. Use the CSS below on the img element:
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
This is supported natively by Chrome, Opera and Safari. Firefox hasn't implemented it yet (bugzil.la). Not sure about IE.
The solution (that I found by myself) is a ninja trick, I can offer you two ways:
first you need to make a "container" for the <img>, it will contain normal and hover states at the same time:
<div class="images-container">
<img src="http://lorempixel.com/400/200/animals/9/">
<img src="http://lorempixel.com/400/200/animals/10/">
</div>
with CSS3 selectors http://jsfiddle.net/eD2zL/1/ (if you use this one, "normal" state will be first child your container, or change the nth-child() order)
CSS2 solution http://jsfiddle.net/eD2zL/2/ (differences between are just a few selectors)
Basically, you need to hide "normal" state and show their "hover" when you hover it
and that's it, I hope somebody find it useful.
Unfortunately you can't use transition on background-image, see the w3c list of animatable properties.
You may want to do some tricks with background-position.
I've figured out a solution that worked for me...
If you have a list item (or div) containing only the link, and let's say this is for social links on your page to facebook, twitter, ect. and you're using a sprite image you can do this:
<li id="facebook"></li>
Make the "li"s background your button image
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
Then make the link's background image the hover state of the button. Also add the opacity attribute to this and set it to 0.
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
}
Now all you need is "opacity" under "a:hover" and set this to 1.
#facebook a:hover {
opacity:1;
}
Add the opacity transition attributes for each browser to "a" and "a:hover" so the the final css will look something like this:
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
#facebook a:hover {
opacity:1;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
If I explained it correctly that should let you have a fading background image button, hope it helps at least!
You can use pseudo element to get the effect you want like I did in that Fiddle.
CSS:
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
position: relative;
}
.title a:after {
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
content: "";
opacity: 0;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
/* TRANSISITION */
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{
opacity: 1;
}
HTML:
<div class="title">
HYPERLINK
</div>
If you can use jQuery, you can try BgSwitcher plugin to switch the background-image with effects, it's very easy to use.
For example :
$('.bgSwitch').bgswitcher({
images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
effect: "fade",
interval: 10000
});
And add your own effect, see adding an effect types
Try this, will make the background animated worked on web but hybrid mobile app
not working
#-webkit-keyframes breath {
0% { background-size: 110% auto; }
50% { background-size: 140% auto; }
100% { background-size: 110% auto; }
}
body {
-webkit-animation: breath 15s linear infinite;
background-image: url(images/login.png);
background-size: cover;
}
Considering background-images can't be animated,
I created a little SCSS mixin allowing to transition between 2 different background-images using pseudo selectors before and after. They are at different z-index layers. The one that is ahead starts with opacity 0 and becomes visible with hover.
You can use it the same approach for creating animations with linear-gradients too.
scss
#mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){
position: relative;
z-index: 100;
&:before, &:after {
background-size: cover;
content: '';
display: block;
height: 100%;
position: absolute;
top: 0; left: 0;
width: 100%;
transition: opacity $transTime;
}
&:before {
z-index: -101;
background-image: url("#{$bkg1}");
}
&:after {
z-index: -100;
opacity: 0;
background-image: url("#{$bkg2}");
}
&:hover {
&:after{
opacity: 1;
}
}
}
Now you can simply use it with
#include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");
You can check it out here:
https://jsfiddle.net/pablosgpacheco/01rmg0qL/
If animating opacity is not an option, you can also animate background-size.
For example, I used this CSS to set a backgound-image with a delay.
.before {
background-size: 0;
}
.after {
transition: background 0.1s step-end;
background-image: $path-to-image;
background-size: 20px 20px;
}
Salam, this answer works only in Chrome, cause IE and FF support color transition.
There is no need to make your HTML elements opacity:0, cause some times they contain text, and no need to double your elements!.
The question with link to an example in jsfiddle needed a small change, that is to put an empty image in .title a like background:url(link to an empty image); same as you put it in .title a:hover but make it empty image, and the code will work.
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}
.title a:hover{ background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}
Check this out https://jsfiddle.net/Tobasi/vv8q9hum/
With Chris's inspiring post here:
https://css-tricks.com/different-transitions-for-hover-on-hover-off/
I managed to come up with this:
#banner
{
display:block;
width:100%;
background-repeat:no-repeat;
background-position:center bottom;
background-image:url(../images/image1.jpg);
/* HOVER OFF */
#include transition(background-image 0.5s ease-in-out);
&:hover
{
background-image:url(../images/image2.jpg);
/* HOVER ON */
#include transition(background-image 0.5s ease-in-out);
}
}
This can be achieved with greater cross-browser support than the accepted answer by using pseudo-elements as exemplified by this answer: https://stackoverflow.com/a/19818268/2602816
I was struggling with this for a bit, I first used a stack of images on top of each other and every three seconds, I was trying to animate to the next image in the stack and throwing the current image to the bottom of the stack. At the same time I was using animations as shown above. I couldn't get it to work for the life of me.
You can use this library which allows for **dynamically-resized, slideshow-capable background image ** using jquery-backstretch.
https://github.com/jquery-backstretch/jquery-backstretch
So I have this transition on hover, that makes a border at the bottom of the element that is being hovered over. All is well there, but when the mouse leaves the element, the border simply disappears, while I want it to "retract" back again. Codepen
HTML:
<div class="object">
<p>Object</p>
</div>
CSS:
* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}
p {
width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}
p:hover {
border-bottom: 5px solid white;
}
How would I go about doing this, as simple as possible?
Thank you ;3
Transitions work in both directions automatically.
The problem you are experiencing is that border-style is not a property that can be animated so it changes instantly.
This means that when you hover it, it becomes solid instantly and then spends time becoming 5px.
But when you unhover it, it becomes none instantly and you can't see the width animating.
Make the default (non-hovered) state explicit so that the border-width is the only thing that changes when you hover it.
Add:
border-bottom: 0px solid white;
to the rules for p.
I don't know if this could help, but in my case I just did like this:
Over:
.<nameOfClass>:hover{
transition: width 0.4s ease-in-out;
}
No over:
.<nameOfClass>:not(:hover){
transition: width 0.4s ease-in-out;
}
Add border-bottom: 0px solid white to p. Css wants to know where to transition back to! :D
for transition add an animate class to the element you want the transition
.animate
{
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
}
Now when you add this class to your element it will make transition in both hover and hover out.
I was hoping someone could help explain the strange behaviour I'm experiencing in Webkit browsers with unwanted delays in CSS transitions.
Here is a link to the page I'm working on: http://demo.daised.com/help-me
The desired outcome is for the menu bar to shrink as the user scrolls down the page. This animates perfectly in Firefox.
However, in Webkit browsers the transition for font-size of the nav items is delayed by 6(!) seconds.
Thanks for helping me understand this better.
The issue is caused by stacked transitions on elements that inherit the transition property.
a, span {
transition: 0.5s;
}
a {
padding: 0.5em 0.75em;
border: 1px solid red;
color: #000;
display: inline-block;
}
a:hover{
color: #f00;
background-color: #0f0;
}
<a>
<span>Text Content</span>
</a>
The section of css a, span applies the transition to both elements.
The span inherits the color from the a, but does not apply the animation color until the a has finished its animation.
The best fix for the above example would be to remove the rule for a, span
and place transition: 0.5s; inside the rule for a:
a {
transition: 0.5s;
padding: 0.5em 0.75em;
border: 1px solid red;
color: #000;
display: inline-block;
}
a:hover{
color: #f00;
background-color: #0f0;
}
<a>
<span>Text Content</span>
</a>
user3360686 is right, your transitions are somehow stacked. I'm not sure why it happens as it's not supposed to.
Anyway what you've done in the header is dangerous, and may trigger weird behaviors :
header * {
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
}
You have about 25 elements in your header, transitions and delays will be applied to each of them. Use specific elements for more efficiency (and elegance).
Using "all" with transition is generally a bad idea, they are a good means to create conflicts. Use specific properties.
This quick and nice answer sums up pretty much everything :
CSS3, WebKit Transition Order? How to queue to the transitions?
I ran into the same problem. My issue was that I was trying to transition properties that were originally being inherited from a parent. It turns out Webkit browsers (not Firefox) require each property that you're transitioning to actually be applied to that element. It seems they cannot transition properties that have been inherited.
For example, I was trying to do this:
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
color: #000;
}
.child {
transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
border-top: 10px #000 solid;
}
.child.active {
border-color: #ff0000;
color: #ff0000;
}
Firefox managed to accomplish this but both Chrome and Safari required this:
.child {
transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
border-top: 10px #000 solid;
// even though the color property is inherited,
// webkit requires it for transitions
color: #000;
}
Another reason for unwanted delays is with overflow: hidden;. If you have a dropdown toggle navbar for example: When it is toggled open, and the max-height is set to 1000px, whilst also having the CSS property overflow: hidden;, it will take longer to transition from its max-height to closed.
Came accross this issue as I had the same bug.
I had this in my CSS :
:root {
--duration-fast: 0.2s ease-in-out;
}
* {
transition: color var(--duration-fast),
border-color var(--duration-fast),
border var(--duration-fast),
transform var(--duration-fast),
opacity var(--duration-fast),
margin var(--duration-fast),
box-shadow var(--duration-fast),
text-shadow var(--duration-fast);
}
Turned out it wasn't such a great idea... Here's how I fixed it:
:root {
--duration-fast: 0.2s ease-in-out;
--transition-fast: color var(--duration-fast),
border-color var(--duration-fast),
border var(--duration-fast),
transform var(--duration-fast),
opacity var(--duration-fast),
margin var(--duration-fast),
box-shadow var(--duration-fast),
background var(--duration-fast),
text-shadow var(--duration-fast);
}
Now, when I want to have an element with transitions (without specifying all of them), I just do this:
.my-component {
transition: var(--transition-fast);
}
I have the html:
<div class="social-section">
<i></i>
<i></i>
</div>
I'd like to have the icon fade to a different color when moused over, using a CSS3 transition. Unfortunately, I'm not sure how to make this work, if it's possible. My current attempt at the css is:
.social-section * i:before { /* Apply this to the i:before, when the a is hovered */
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.social-section a i:before {
color: red;
}
.social-section a:hover i:before {
color: black;
}
In case this is helpful, here's the relevant section of the Glyphicons font css code:
.glyphicons {
display: inline-block;
position: relative;
padding: 0 0 5px 35px;
*display: inline;
*zoom: 1;
}
.glyphicons i:before {
position: absolute;
left: 0;
top: 0;
font: 20px/1em 'Glyphicons';
font-style: normal;
color: red;
}
A pseudo-code, since I'm not sure how it should act based on your quesiton...
put the transition css code you have in the element you want to affect (i.e. not the parent)
#child {
// transitions....
}
then do
#parent:hover #child {
// your changes
}
When the parent element is hovered, make changes to the child. The child's existing transition effects will be used for this, which I think is your goal.
Also, if you're going to be transitioning between icons, you'll need to change the position of the sprite-image, which I assume you're using, not changing the color style.
The answer is that pseudo elements aren't capable of transitions on most versions of most browsers. This issue is so frustrating that Chris Coyier (of css-tricks.com) is keeping a page open on the current status.
As of time of writing, transitions on pseudo elements are supported by:
Firefox 4.0+
Chrome 26+
IE 10+
You can confirm this on your browser.