How do I keep div expanded as it is hovered(instead if once it s hovered it executes one time and get smaller again) In my case as hover make the box bigger and keep it so, mouseout then bring it small..
Here is my code:
.box{width:30px; height:30px; border-radius:100%; margin:200px auto; background:lightblue;}
.box:hover{-webkit-animation:boxes 2s;}
#-webkit-keyframes boxes{
from{width:30px;heigh:30px;}
to{width:200px;height:200px;}
}
http://jsfiddle.net/4S98w/
Use -webkit-animation-fill-mode: forwards; to let the final animation state persist:
.box:hover {
-webkit-animation:boxes 2s;
-webkit-animation-fill-mode: forwards;
}
http://jsfiddle.net/teddyrised/4S98w/1/
However, if you want the animation to go both ways (i.e. animated enlargement when hovering in, animated shrinking when hovering out), may I suggest using CSS transitions instead?
.box {
width:30px;
height:30px;
border-radius:100%;
margin:200px auto;
background:lightblue;
transition: all 2s ease-in-out;
/* or you can use "transition: all 2s linear:" */
}
.box:hover {
width: 200px;
height: 200px;
}
http://jsfiddle.net/teddyrised/4S98w/2/
js fiddle : http://jsfiddle.net/4S98w/3/
Use css transition :
.box{width:30px; height:30px; border-radius:100%; margin:200px auto;background:lightblue;
transition : width 2s, height 2s;
-webkit-transition : width 2s, height 2s;
}
.box:hover{ width:200px;height:200px;
transition : width 2s, height 2s;
-webkit-transition : width 2s, height 2s;
}
Related
I have the following class:
.dot{
width:40px;
height:40px;
position:absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index:999;
margin-top:-60%;
pointer-events:none;
}
I modified the class like this:
.dot{
width:40px;
height:40px;
position:absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index:999;
margin-top:-60%;
pointer-events:none;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
What I tried to do was to apply a transition so that the div is not initially shown when the page is opened but it reaches opacity: 1; after 1s has passed.
I did some research and all I could find on SO and Google was related to hovering. I tried applying "opacity: 0;" to my class but then the transition wouldn't take place, the div would just stay hidden.
Is there any way to accomplish an opacity transition without a hover state using CSS?
You can accomplish this with CSS3 animation:
.dot{
width:40px;
height:40px;
position:absolute;
background:url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size:100% 100%;
z-index:999;
pointer-events:none;
animation:fadeIn 1s ease-in;
}
#keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
<div class="dot"></div>
You can achieve this using css animations.
The animation is set using the #keyframes rule. To illustrate in the example, I removed the margin top; this is not a necessary change in your code.
.dot {
width: 40px;
height: 40px;
position: absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index: 999;
// margin-top:-60%;
pointer-events: none;
animation: fadein 1s ease-in;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="dot"></div>
Yes, use JavaScript to trigger the transition. That is the answer to your question. A transition only happens when there is something to transition to. Just sepcifying a transition on an element does not trigger the transition. Change does. When the element first loads there is nothing to transition to.
I try to change bootstrap slideshow effect, I found the answer on Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition
It works, but it has no fade animation if I click slide navigation at the bottom of the slide. Here is my project example with the implementation:
http://hanzoclothing.com/
So far I just applied the rule in the css
.carousel .item {
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
-ms-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
}
.carousel .active.left {
left:0;
opacity:0;
z-index:2;
}
.carousel .next {
left:0;
opacity:1;
z-index:1;
}
I am trying to implement a grow and shrink effect on DIV element, this is working but the animation is working from left to right. Would like to make it from center.
Below I have placed the code, and here is the fiddle
.elem {
position:absolute;
top : 50px;
background-color:yellow;
left:50px;
height:30px;
width:30px;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation-name: grow;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: grow;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
#-webkit-keyframes grow {
from {
height:30px;
width:30px
}
to {
height:130px;
width:130px
}
}
#-moz-keyframes grow {
from {
height:30px;
width:30px
}
to {
height:130px;
width:130px
}
}
How can I do this.
Use transform: scale(n) instead of changing the width/height
#keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(4.333);
}
}
Demo
You shouldn't need the browser prefixed versions at this point in time.
Keep in mind that scaling an element like an image to 4.3x its full size will make it blurry, so it might be better to make the default (1 / 4.3)x to start, then scale it up to 1 in the animation.
How can i make the transition still occur after the event is removed!
I want to resize div height when hover to be smaller, but I want the size to still smaller even when I remove hover from the div.
#header{
background-color: red;
height:300px;
width:100%;
-moz-transition:height 500ms linear;
-webkit-transition:height 500ms linear;
-o-transition:height 500ms linear;
-ms-transition:height 500ms linear;
transition:height 500ms linear;
}
#header:hover{
height:100px;
}
I want the div to have 100px height after the mouse is out, can I make it using only css, or I have to use jQuery to change the class or sth like that?
You can't make a hover "stick" with just CSS. You would need to add a class or inline style with Javascript to maintain the appearance.
You can make a hover "stick" with just CSS.
#keyframes hover {
0% {
// normal styles
}
100% {
// hover styles
}
}
.class {
animation-name: hover;
animation-duration: 350ms;
animation-fill-mode: backwards;
animation-play-state: paused;
}
.class:hover {
animation-fill-mode: forwards;
animation-play-state: running;
}
See http://cdpn.io/GLjpK and http://lea.verou.me/2014/01/smooth-state-animations-with-animation-play-state/.
This is what I have:
.box{
background:#FFF;
-webkit-transition: background 0.5s;
}
.box:hover{
background:#000;
}
But this appends to both onmouseover and onmouseout actions, but isn't there a way to control them? Something like:
-wekbkit-transition-IN: background 1s;
-webkit-transition-OUT: background 10s;
Just redifine your transition in the over pseudo element.
.box{
background: white;
-webkit-transition: background 5s;
}
.box:hover{
background: olive;
-webkit-transition: background 1s;
}
Look my http://jsfiddle.net/DoubleYo/nY8U8/
Either use an animation (only in webkit currently), or use JS to add and remove the properties, they will still animate.