I want to apply for CSS transition different values on hover in ease-in and ease-out.
Like this,
ease-in: 180ms,
ease-out: 240ms
when I hover it will be 180ms ease-in, but when hovering out it will be 240ms ease-out.
You can use different transition-duration values for the styles affecting your element, for example:
div {
width: 150px;
height: 150px;
background-color: gray;
transition: width 180ms ease-in;
}
div:hover {
width: 300px;
transition-duration: 240ms;
transition-timing-function: ease-out;
}
<div>My Element</div>
For more details please check CSS Transitions
Related
this question might be obvious but i'm new in css.
I'm animating a shape so when you hover it, it stretches. I've completed the hover on with a nice ease transition but when you move off the mouse the transition doesn't work. Is there a way to make it happen also in the hover off moment?
.shape1{
position: absolute;
background:red
top:512px;
width:180px;
height:140px;
}
.shape1:hover {
height: 160px;
top:492px;
transition: 0.2s ease;
}
Your answer
You have added the transition property on the hover state of the element. Therefore the transition is not applied when you leave the cursor from the element.
.shape1{
position: absolute;
background: red;
top: 512px;
width: 180px;
height: 140px;
transition: .2s ease; /* move this here from :hover */
}
Further information
Besides this you can also add specific properties to the transition. For example, if you only want the height to be animated you could it like this:
.shape1 {
transition: height .2s ease;
/* this inly affects height, nothing else */
}
You can even define different transition-times for each property:
.shape1 {
transition: height .2s ease, background-color .5s linear;
/* stacking transitions is easy */
}
Add the transition before the :hover, so the transition always applies
.shape1 {
transition: 0.2s ease;
}
The :hover selector is used to select elements when you mouse over them.
W3Schools
When you add also transition to your shape1 class it should works
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 use height property to animate my DIV, it appears on hover of another element - it "rolls" from top. Is there a way to rotate the animation, so I would get it to appear from bottom to top?
HTML:
SHOW IT
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
CSS:
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.show:hover + #appear, #appear:hover {
height: 331px;
}
JSFiddle
One way to do this without using absolute positioning or altering your markup is to transition a margin-top at the same time as the height. So your CSS might look like:
html, body { background-color: #dedede; }
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
margin-top:331px;
}
.show:hover + #appear, #appear:hover {
margin-top:0;
height:331px;
}
SHOW IT
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
Here's also a JSFiddle to demonstrate. (If I've misunderstood your intentions, please tell me.)
Hope this helps! Let me know if you have any questions.
checkout the fiddle https://jsfiddle.net/8paj437a/2/
I set position:absolute to the #appear div. and bottom:0; so it will take height from bottom.
And to keep it intact from top. I placed it within a container and give position relative to the container.
HTML
SHOW IT
<div class="container">
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
</div>
CSS
.container {
width: 308px;
height:331px;
position:relative;
}
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
position:absolute;
left:0;
bottom:0;
}
.show:hover + .container #appear, .container #appear:hover {
height: 331px;
}
By default, height transition works from top to bottom. But you can make it work from bottom to top with a very simple trick. All you need is to rotate the div to 180 degrees. This will rotate the transition direction as well. Try this css on your div.
transform: rotate(180deg);
This pretty simple JSFiddle (http://jsfiddle.net/AndyMP/sj2Kn/) changes the background colour of a block on 'hover', but how do I get it to fadein/fadeout?
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
}
.block:hover {
background-color: #333;
}
You need to use transition property
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
-webkit-transition: background .5s; /* For webkits */
transition: background .5s;
}
Demo
The property is simple, the first parameter you pass is the property you want to animate, so say you want to animate the height you can pass the height or you can use all as the value if you want to transit all the properties which are transitional, and the next parameter is the time we set for the transition, you can set as 1s, 2s and so on where S stands for seconds.
It's worth noting that the property am using is a short hand property for the following properties
transition-delay: 0s
transition-duration: 0s
transition-property: background
transition-timing-function: ease
Where in the above example we are using the transition-property and transition-duration, default values are used for other properties.
Demo Fiddle
Add transition:background 200ms ease-in; to .block
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
transition:background 200ms ease-in;
}
Where 200ms is the amount of time you wish the fade to take.
The CSS property transition defines you want an animation to take place, the three following parts are the specific property you want to transition (can be set to all), the speed, and the animation timing function.
More on CSS transitions from MDN
CSS transitions, which are part of the CSS3 set of specifications,
provide a way to control animation speed when changing CSS properties.
Instead of having property changes take effect immediately, you can
cause the changes in a property to take place over a period of time.
For example, if you change the color of an element from white to
black, usually the change is instantaneous. With CSS transitions
enabled, changes occur at time intervals that follow an acceleration
curve, all of which can be customized.
JSFIDDLE
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
transition: all 0.25s ease;
-moz-transition: all 0.25s ease;;
-webkit-transition: all 0.25s ease;
}
.block:hover {
background-color: #333;
transition: all 0.25s ease;
-moz-transition: all 0.25s ease;;
-webkit-transition: all 0.25s ease;
}
I'm currently making a new theme for my blog and I'm having a problem with the header. See, the header has a fixed position at the top, like a nav bar, and it shrinks when the user scrolls down. However, on some browsers (mainly Chrome, especially for windows), the Twitter icon on the header has a strange flickering behaviour, going down to the next line for 1/10th of a second or so.
I've seen lots of things about flickering bugs in Chrome when using transitions but nothing that looks like this (also, the fixes didn't apply to my situation).
It's a simple transition on the margin of the icons and the height of the header.
Has anyone seen something similar?
Thanks a lot!
EDIT: recreated it in a Fiddle. The problem is still here: http://jsfiddle.net/PVmgz/
HTML `
<header>
<div class="container header">
<div id="logo">Logo</div>
<div class="social">
<div class="search icon">
</div>
<div class="facebook icon">
</div>
<div class="twitter icon">
</div>
</div>
</div>
</header>
<div id="button">Scroll</div>
`
CSS
header {
width: 100%;
height: 98px;
background: #EEE;
position: fixed;
top: 0;
z-index: 9999;
-webkit-transition: height, ease-in, 0.4s;
-moz-transition: height, ease-in, 0.4s;
-ms-transition: height, ease-in, 0.4s;
-o-transition: height, ease-in, 0.4s;
transition: height, ease-in, 0.4s;
}
header.scroll {
height: 60px;
}
header.scroll .header #logo {
width: 350px;
height:50px;
}
header.scroll .header .social {
margin-top: -2px;
}
header.scroll .header .social .icon {
margin-left: 2px;
}
.header {
padding: 5px 10px 0;
}
.header #logo {
width: 400px;
height:82px;
background: #696;
color:white;
float: left;
-webkit-transition: width, ease-in, 0.4s;
-moz-transition: width, ease-in, 0.4s;
-ms-transition: width, ease-in, 0.4s;
-o-transition: width, ease-in, 0.4s;
transition: width, ease-in, 0.4s;
}
.header #logo img {
max-width: 100%;
height: auto;
}
.header .social {
float: right;
margin-top: 19px;
-webkit-transition: margin-top, ease-in, 0.4s;
-moz-transition: margin-top, ease-in, 0.4s;
-ms-transition: margin-top, ease-in, 0.4s;
-o-transition: margin-top, ease-in, 0.4s;
transition: margin-top, ease-in, 0.4s;
}
.header .social .icon {
display: inline-block;
margin-left: 20px;
width: 51px;
height: 51px;
border-radius:999px;
-webkit-transition: margin-left, ease-in, 0.4s;
-moz-transition: margin-left, ease-in, 0.4s;
-ms-transition: margin-left, ease-in, 0.4s;
-o-transition: margin-left, ease-in, 0.4s;
transition: margin-left, ease-in, 0.4s;
}
.header .social .icon.facebook {
position: relative;
background:#336699;
}
.header .social .icon.twitter {
position: relative;
background:#66cccc;
}
So I have a possible explanation for this problem, and some code that definitely fixes it.
The possible explanation is that the shrinking social media icons are being rounded up in size at times. As they're shrinking it might be calculating a width of, say, 26.6 pixels, when of course it must always display as an integer number of pixels. When it rounds that up to 27 pixels, this knocks the last social media icon to the next level.
If this is correct, it flickers because it will continue to shrink, calculating 26 pixels, which is an O.K. value, and it won't drop down. But then it immediately goes to 25.9 pixels, which again drops it down.
If this is indeed correct, it'd actually be a bit more complicated than this simple explanation I'm giving (the width of the parent element comes into play), but this is enough to get the idea across.
Anyway, a fix that works is giving the div that holds the icons a width, so that there's 'breathing room,' if you will, for the icons to expand.
Here's some code that gives it that room, but you'll need to optimize it for it to display as you want it to.
.header .social {
...
width: 500px;
}
My initial idea for a solution would be the set the width of the this div, then float the icons to the right within it.
Kinda late with the answer, but i was just confronting with this issue when transitioning the margin-left value.
The solution is setting the "border-spacing" value to 0