I want to avoid some of the transition effects on the element (for example: opacity). I should use opacity 0s, because this should be the default value or in other words transition will have no effect on this. But it's not working this way. This is what I tried:
div {
width: 100px;
height: 100px;
opacity: 0.5;
background: red;
-webkit-transition: all 2s, opacity 0s;
transition: all 2s, opacity 0s;
}
div:hover {
width: 300px;
opacity: 1;
}
<div></div>
div {
width: 100px;
height: 100px;
opacity: 0.5;
background: red;
-webkit-transition: all 2s, opacity 0.1s;
transition: all 2s, opacity 0.1s;
}
div:hover {
width: 300px;
opacity: 1;
}
<div></div>
However, if 0s of the opacity changed to 0.1s, it will work(with duration of 0.1s), is there a way to "disable" the animation in some other way, perhaps, so it will work without even a small value as 0.1s?
Here is an solution for this
transition: all 2s, opacity 1ms;
As 0s is not valid time for this (I don't know why this). and 1ms is very small time likely to 0s for human eye.
And for your current problem you can also use transition: width 2s which is only applicable for width.
Related
I have an some images with hover effects, for example they change the bgcolor of the body.
I want a transition bewtween the colors, but i'm too dumb.
I'm trying to use this, but it still does not show a transition.
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
You're not dumb! Just need some practice. What you have is fine I just can't see the rest of your code. But this is what you're looking for:
div {
display: block;
width: 100px;
height: 100px;
background-color: red;
transition: background-color 1000ms linear;
}
div:hover {
background-color: green;
}
<div>
</div>
You can do it this way:
.x {
width: 300px;
height: 200px;
background-color: #fa0;
transition: 1000ms linear;
}
.x:hover {
background-color: #0af;
}
<div class="x"></div>
The important thing is to put the transition parameter into the rule for the element itself, and not to write the background-color into the transition value. The hover rule only defines the second color for the transition.
<!doctype html>
<html>
<head>
<style type="text/css">
#i {
height: 20px;
background-color: #999;
/*return animation*/
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
#i:hover {
height: 300px;
background-color: #F00;
/*begin animation*/
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
</style>
</head>
<body>
<div class="c" id="i" >Hover Me</div>
</body>
</html>
See above. How do I get the box 'hover me' to end its bck-color to red, on the /return animation/, using only CSS. It understandably returns to #999, but I dont want that.
Basically: Start box 20px, #999 >> expand 300px >> Contract 20px, #red
Also is there a way to pass a value to a css property when using transitions like this:
-webkit-transition: background-color:red 0.4s ease-in 0.3s
Thanks for your help. Just trying to understand the very basics.
You can do something very close (but maybe not enough) using CSS animations.
Set an animation (not transition) on the element, and pause it. Set it's fill mode to forwards. On hover set the animation to running. When the animation ends, the end state remains.
The caveat - if somebody stops hovering before the animation is done, it will remain in it's current position until hovered again.
#i {
height: 20px;
background-color: #999;
animation: animation 0.4s ease-in 0.3s;
animation-fill-mode: forwards;
animation-play-state: paused;
}
#i:hover {
animation-play-state: running;
}
#keyframes animation {
0 {
height: 20px;
background-color: #999;
}
50% {
height: 300px;
}
100% {
height: 20px;
background-color: red;
}
}
<div class="c" id="i">Hover Me</div>
I think we don't have anything like this right now, you probably use JavaScript to do this kind of things.
I had to use a combination of jquery add and remove classes. wishing it could have been pure css though.sigh
Hopefully this simple code helps someone. If anyone has something better esp with pure css... id be happy to learn. #obi Cheers and thanks to all.
<body>
<div class="c" id="i" >Hover Me</div>
<style>
.c {height: 20px; background-color: #999;}
/*----begin animation-----------------------------------*/
#i:hover {
height: 300px;
background-color: #0F0;
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-moz-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-ms-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-o-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
/*----return animation-----------------------------------*/
.c_returnAnime {
height: 100px;
background-color: #F00;
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-moz-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-ms-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-o-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
</style>
<script>
$('#i').hover(
//always add class before removing other or errors
function(){ $(this).addClass('c_returnAnime') },
function(){ $(this).removeClass('c') }
)
</script>
</body>
</html>
in my present code, button initially is visible and with the transition, it becomes hidden behind the box. What i want is "my button initially should be hidden and should appear with the transition". Thanks in advance..
P.S. No jQuery
<!DOCTYPE HTML>
<body>
<div id="anim">
</div>
<input type="button" value="this should be behind" id="btn" />
</body>
</html>
<style>
#anim{
z-index: 1;
position: absolute;
width: 300px;
height: 200px;
background-color: red;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
#anim:hover{
height:400px
}
#btn{
z-index: -1;
position:fixed;
margin-top: 300px;
}
</style>
You can set the opacity of the button on hover without changing the structure of your document using the adjacent sibling selector.
Here's how:
#anim:hover + #btn
{
opacity: 1;
}
Edit: You can also delay this using transition-delay on the button:
#btn
{
opacity: 0;
transition-delay: 700ms;
z-index: 2;
position:fixed;
margin-top: 300px;
}
Below is the complete CSS, as some changes were also made to initially hide the button, and to properly set the z-index property.
JSFiddle here.
#anim{
z-index: 1;
position: absolute;
width: 300px;
height: 200px;
background-color: red;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
#anim:hover{
height:400px
}
#anim:hover + #btn{
opacity: 1;
}
#btn{
opacity: 0;
transition-delay: 700ms;
z-index: 2;
position:fixed;
margin-top: 300px;
}
I think this is what you want:
#anim{
width: 300px;
height: 200px;
background-color: red;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-ms-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
}
#anim:hover{
width: 600px;
}
#btn{
margin-left: 100px;
margin-top: 100px;
opacity:0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-ms-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
#anim:hover #btn{
opacity:1;
}
and add your button inside #anim div, just like this:
<div id="anim">
<input type="button" value="this should be behind" id="btn" />
</div>
and all this without javascript, only css.
JSBIN
I'm trying to create an effect where:
The cursor hovers over a box
The bar slides out
As the sliding motion eases out a title appears
The cursor leaves the box
The title begins to disappear as the bar slides back
The bar finishes sliding back
But instead when the cursor leaves the box the delay is invoked again so the title fades out as the bar finishes it's transition back which looks ugly. How can I achieve the desired effect?
HTML:
<div class="slidingbar">
<h1 class="slidingbar-content" id="title">My Awesome Web App</h1>
</div>
CSS:
.slidingbar{
width: 50px;
height: 50px;
transition: width 2s;
-webkit-transition: width 2s;
}
.slidingbar .slidingbar-content{
margin: 0px;
opacity: 0;
white-space: nowrap;
overflow: hidden;
transition: opacity 1s 1s;
-webkit-transition: opacity 1s 1s;
}
.slidingbar:hover{
width: 100%;
}
.slidingbar:hover .slidingbar-content{
opacity: 1;
}
You can set different transitions in the base state and in the hover state.
In this case, the delay should be only in the hover state, and the base state should be un-delayed.
.slidingbar .slidingbar-content{
margin: 0px;
opacity: 0;
white-space: nowrap;
overflow: hidden;
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.5s;
-webkit-transition-delay: 0s;
-webkit-transition-timing-function: linear;
transition-property: opacity;
transition-duration: 0.5s;
transition-delay: 0s;
transition-timing-function: linear;
}
.slidingbar:hover .slidingbar-content{
opacity: 1;
transition-delay: 1.5s;
-webkit-transition-delay: 1.5s;
}
demo
If i understood the instructions, try applying the transition on the same element... like this
HTML
<div class="slidingbar">
<h1 class="slidingbar-content" id="title">My Awesome Web App</h1>
</div>
CSS
.slidingbar{
border: 1px solid #cccccc;
height: 50px;
}
.slidingbar-content{
width: 50px;
margin: 0px;
white-space: nowrap;
overflow: hidden;
opacity: 0;
transition: opacity 1.5s, width 2s ;
-webkit-transition: opacity 1.5s, width 2s;
}
.slidingbar-content:hover{
width: 100%;
opacity: 1;
}
Hope it help you
I am trying to do simple tooltip only with css3 and html, but the transition doesn't work. What am I doing wrong?
HTML
<p>
This has tooltip
</p>
<div class="tooltip">Tooltip content</div>
CSS
p {
width: 200px;
background-color: aqua;
padding: 10px;
margin-top: 50px;
}
div.tooltip {
position: absolute;
width: auto;
padding: 10px;
background-color: rgba(0,0,0, 0.5);
top: 0px;
display: none;
opacity: 0.0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
p:hover + div.tooltip {
display: block;
opacity: 1.0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
http://jsfiddle.net/MCDg4/
Update / Alternate solution
For a modern browser CSS3 solution you could use pseudo elements..
<span data-tooltip="I am the tooltip">This has a tooltip</span>
and
[data-tooltip]{
position:relative;
}
[data-tooltip]:before{
content:attr(data-tooltip);
position:absolute;
bottom:110%;
padding:10px;
background:#666;
opacity:0;
color:white;
font-size:smaller;
-webkit-transition:opacity 1s ease;
-o-transition:opacity 1s ease;
transition:opacity 1s ease;
pointer-events:none;
}
[data-tooltip]:hover:before{
opacity:1;
}
Demo at http://jsfiddle.net/BJ2tr/
(this could be done without pseudo-elements by nesting the tooltip inside the elements that it refers to, and adjusting the css accordingly)
Unfortunately when you change display from none to something else, you cannot have transitions.
Instead of display:none you could just offset it outside of the window (with top:-9999px) and bring it to position when showing it.
div.tooltip {
position: absolute;
width: auto;
padding: 10px;
background-color: rgba(0,0,0, 0.5);
top: -999px; /*CHANGED THIS AND REMOVED display:none*/
display: none;
opacity: 0.0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
p:hover + div.tooltip {
opacity: 1.0;
top: 0px; /*ADDED THIS AND REMOVED display:block*/
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
This will, however, not fade out (only in) since it moves it away on mouseout (so it actually does fade but you do not see it because it is outside the viewport)..
Explanation
You put transition only on opacity, while when changing to display:block; it is shown as a block with opacity:1; by default.
Solution
(JSFiddle)
Delete the display:none; and display:block on your tooltip element.