I am new to CSS Transition effects. I just added the transition for the background color to be changed as given in the code. But I didn't get the transition effect.
.ext-lnk:link
{
background-color:#1f5ea8;
-moz-transition: background-color 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
.ext-lnk:hover
{
background-color:#b32e37;
}
How to fix it?
Related
So I've got this circle that is rotating on hover but it's not centered and I don't know why (I did add the 'transform-origin:center center')
And also, sorry I know very very little about css but what does it do/mean when there's two consecutive selectors pls?
Here's my code:
#welcome:hover #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
transform-origin : center center;
}
#welcome #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
transform-origin : center center;
}
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="welcome">
<div id="welcomeavatar"><img src="http://www.for-example.org/img/main/forexamplelogo.png"></div>
<div id="speechbubble"></div>
The snippet isn't showing what's really happening but it's just so you can have my code and here's the real result : www.typhotoshop.tumblr.com
Thank you for taking the time!
The rotation is actually around the center, but the div you're applying the rotation to is larger than your image. See screenshot below:
You'll want to make sure the div you're rotating is exactly the same size as the image inside(ie. remove width/height from that div altogether or add width/height that is the same as the image).
Also, the margin-left on the #speechbubble increases on the hover as well, so again, the rotating div moves left. Make that margin the same on hover and no-hover and it won't move.
Hope that helps.
Apparently I don't know how to Stack Overflow. My original comment as an actual answer:
It's off center because the element you are rotating (#welcomeavatar) is display:block which takes up the full width of its container. Making it display inline-block is less than ideal because it can insert unwanted whitespace.
You should give #welcomeavatar a width and a height of 200px (the same as your image). Then you need to add some styles to your image as well to get rid of the wobble. Make your image display:block and add a height/width of 200px as well.
Hello i have a Problem with transition top.
If i do it like this, it works:
.mb-navbarCollapse {
width: 100%;
top:0px;
background-color: #515151;
background-image: url('img/darkgrey-grid-pattern.png');
background-repeat: repeat;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
But if i do it like this, transition top is not working:
.mb-navbarCollapse {
width: 100%;
top:0px;
background-color: #515151;
background-image: url('img/darkgrey-grid-pattern.png');
background-repeat: repeat;
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
-webkit-transition: background-image 0.1s ease-in-out;
-moz-transition: background-image 0.1s ease-in-out;
-o-transition: background-image 0.1s ease-in-out;
-ms-transition: background-image 0.1s ease-in-out;
transition: background-image 0.1s ease-in-out;
-webkit-transition: background-repeat 0.1s ease-in-out;
-moz-transition: background-repeat 0.1s ease-in-out;
-o-transition: background-repeat 0.1s ease-in-out;
-ms-transition: background-repeat 0.1s ease-in-out;
transition: background-repeat 0.1s ease-in-out;
}
This is my nav:
<nav class="navbar navbar-default navbar-static-top mb-bg-red mb-red-grid-pattern">
...
</nav>
maybe this information is important. I add my class mb-navbarCollapse to <nav> but i'm not removing the class navbar which look like this:
.navbar {
height:64px;
padding-left: 30px;
padding-right:-30px;
position: absolute;
top: 150px;
-webkit-transition: top 0.3s ease-in-out;
-moz-transition: top 0.3s ease-in-out;
-o-transition: top 0.3s ease-in-out;
-ms-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
Thanks for reading
EDIT: Harry's answer
Okay, i did this:
-webkit-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
-moz-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
-o-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
-ms-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
Now top is working but background-image its also animated but i don't want to animate it :/
EDIT2: Demo http://mirsoftware.de/muthbau/
I have a hovering effect on an image. If you mouseover it and stay there with the mouse, the transition will be execute with its given duration.
I have also done the correct transition when you leave the spot.
Now, i want that the hover transition starts with the given duration, no matter if you just hovered over the image for a quick 1millisecond.
Is this only possible with javascript?
.example { position: absolute;
left: 0;
height:320px;
bottom: 0;
width: 100%;
background: #000;
background-color: rgba(255, 255, 255, 0.4);
opacity:0;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
-ms-transition: background-color 2s ease-out;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
text-align: center;
line-height: 299px;
text-decoration: none;
color: #000000;
font-size:30pt;
}
.image:hover .example { background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:1;
}
With this, if i hover over the image, my text and background colors animating in and when i leave the image the text and background color is animating out. It works okay. (even though, my above code is a bit unsorted for now)
So, all i want is that the fading in and out animation will be fully executed even if i just hover fast over the image and back.
I think it is not possible is it? (with css only i mean)
I am afraid, you would have to use a bit of Javascript because as far as I know, it is not possible to do it without javascript.
Add a class on hover, and remove it on animation end. Refer to this answer to know how to do that - css3 animation on :hover; force entire animation
PS: I would have put this is a comment, but I don't have the privileges right now.
I've been thinking about this issue for the past few days but I can't figure out what exactly is the problem.
Consider the following snippet from style.css:
.tint:before {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.tint:hover:before {background:rgba(159,182,205,0.1);}
As you can see from the code above, upon an image hover, a "tint" transition should occur as to make the user want to click on that image. However, this feature does not work in Chrome.
Why does the hover transition not work in Chrome yet works perfectly fine in Firefox?
Is this the expected behavior? Or does Chrome not render these transitions correctly?
The problem is related to the :before pseudo class. It doesn't seem like hover is being triggered on that class. If you remove it, it works just fine.
.tint {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.tint:hover{background:rgba(159,182,205,0.1);}
Here is the jsFiddle - http://jsfiddle.net/qGAn9/
UPDATE:
If :before pseudo element is needed, then you can trigger the hover on the parent element. I also had to add some additional styles to make the pseudo element appear on top.
.tint:before {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
content: "";
width: 100%;
height: 100%;
position: absolute;
}
.tint:hover:before{background:rgba(159,182,205,0.5);}
jsFiddle here - http://jsfiddle.net/qGAn9/2/
Is it not possible to transition outlines with css3?
body{margin:10px;padding:0px;}
#tDiv{
background-color:#999;
width:500px;
height:500px;
color:black;
outline: 5px dashed #222;
-moz-transition: color 2s;
-o-transition: color 2s;
-webkit-transition: color 2s;
transition: color 2s;
-moz-transition: outline-color .7s ease-out;
-o-transition: outline-color .7s ease-out;
-webkit-transition: outline-color .7s ease-out;
transition: outline-color .7s ease-out;
-moz-transition: background-color .7s ease-out;
-o-transition: background-color .7s ease-out;
-webkit-transition: background-color .7s ease-out;
transition: outline-background .7s ease-out;
}
#tDiv:hover{
color:green;
background-color:gold;
outline: 5px dashed magenta;
}
http://jsfiddle.net/loren_hibbard/uKGCc/
This just changes the outline immediately..
Thanks
If you want to apply multiple different transitions, you have to coalesce them into one rule (plus repeat them with the necessary prefixes):
-webkit-transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out;
-moz-transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out;
-o-transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out;
transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out;
Example: http://jsfiddle.net/UF3Ht/6/
https://developer.mozilla.org/en-US/docs/CSS/transition-property
transition:
[<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
[, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
When you use the same property multiple times, only the last one will be applied as usual:
transition: outline-color .7s ease-out; /* this will be overridden */
transition: background-color .7s ease-out; /* this will be used */