Is it possible to trigger an animation with an another animation in CSS3 ? Or is it possible to make one animation to start just after when an another animation is finished ? I know it is possible with java script,but i want to know if it can be achieved with pure css3 ?
You can use transition-delay in conjunction with transition.
In my Snippet, the transition style causes div to change from:
Red to green in 1s.
100px to 250px width in 2s.
100px to 150px height in 1s.
The transition-delay style causes:
The first animation to occur immediately (background).
The second animation to occur after 1s (width).
The third animation to occur after 3s (height).
The end result is that each animation follows on the heels of the previous animation.
Snippet
div {
transition: background 1s, width 2s, height 1s;
transition-delay: 0s, 1s, 3s;
background: red;
width: 100px;
height: 100px;
border: 1px solid black;
}
div:hover {
background: green;
width: 250px;
height: 150px;
}
<div>
</div>
Related
I've got this code...
<img class="logo" src="img/logo.jpg"> <!-- Logo size is 96x96 -->
...and this
.logo {
transition: .5s;
}
.logo:hover {
transition: .5s;
width: 128px;
height: 128px;
}
It resizes on hovering, but not with transitioning. I just hover it and it instantly resizes, and I have no idea why does transition not work.
There are several things wrong with the CSS causing it not to transition.
First, as #WaisKamal said, you need to set initial states to transition from. Images size automatically in HTML but that's not a valid starting point for CSS.
Second, you need to define WHAT properties are being transitioned.
So you would need to add width and height. Or you can use the all identifier:
.logo {
display:block; //make sure the image is a block element
width: 96px;
height: 96px;
transition: all 0.5s linear;
}
.logo:hover {
width: 128px;
height: 128px;
}
Now that will work but it's going to be kind of janky since animating height/width cause page repaints.
Instead, I would suggest using a transform on the image.
.logo {
display:block; //make sure the image is a block element
// initial size is fine here because we're using a transform
transition: transform 0.5s ease-in-out;
}
.logo:hover {
transform: scale(2) // decimal notation 2 = 200% = 128x128px
}
There is no need to define the same transition property for the image and the hover pseudoclass. If you don't define transition in .logo:hover, it will take the previously set value of half a second.
The problem here is that you must specify an initial width and height for the image in order to have it resize smoothly.
The existing questions do not cover this case. Height transition is not working when the text creates more rows. That's probably because I set no height, but I want't to keep changing it according to the text size. How can I create a smooth transition effect?
.content{
border: 1px solid blue;
min-height:30px;
width:120px;
transition: height 1s ease;
}
<div contenteditable="true" class="content">Type more...</div>
I try to get a slide effect with angular and ngAnimate.
I works nicely as a fade-in/fade-out effect with opacity.
.show-animation {
-webkit-transition: 1s all linear;
transition:all linear 1s;
opacity: 1;
}
.show-animation.ng-hide {
opacity: 0;
}
See example: https://jsfiddle.net/1bnpqpy8/10/
But when I try to use the max-height attribute for a slide effect it does not work anymore.
.show-animation {
-webkit-transition: 1s all linear;
transition:all linear 1s;
max-height: 25px;
}
.show-animation.ng-hide {
max-height: 0;
}
See example: https://jsfiddle.net/1bnpqpy8/11/
Why does ngAnimate not work with max-height?
What do I do wrong?
You are missing an important css property: overflow.
overflow tells a div what to do if the contents are greater than height (or max-height). The default value is visible and since one of your inner divs has a set height (timelineVoid set to 20px), this will force the div to be visible.
You need overflow (specifically overflow-y) set to hidden in your show-anomation div to allow content to be hidden:
overflow-y: hidden;
here is the fiddle: https://jsfiddle.net/5mr8azvn/
Here's the html simplified sample
<div class="big">
<a href=".....">
<img src=".....">
</a>
</div>
css
.big {
width: 33.3333%;
}
img:hover {
opacity: 0.9;
transition: opacity 0.4s;
}
When I hover above img, the opacity transition works fine, but the image flickering on span 0.4s, it's like resizing, like the Chrome recalculate the percentage size again within 0.4s.
Tried webkit transition, not fixing anything. Transition all, still happening.
This problem only happen on Chrome, no problem at all on Firefox.
Only happen when using percentage, with fixed width works fine, but I need to use percentage on this one.
Thanks for any help
You can try this:
a {display: block }
a img {transition: opacity 0.4s; max-width: 100%;}
a:hover img {opacity: 0.9}
This is what fixed it for me:
max-width: calc(100% - 1px);
max-height I could leave at 100%; even though it was the height that was changing.
I am using the method outlined here to fade in a background image on hover of an element.
My codepen example:
http://codepen.io/anon/pen/vqtjf
HTML:
<div><span></span></div>
CSS:
div {
position: relative;
width: 219px;
height: 218px;
background: url(https://dl.dropboxusercontent.com/u/3454522/home-option-icon-off.png) no-repeat;
}
span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(https://dl.dropboxusercontent.com/u/3454522/home-option-icon-energy.png) no-repeat;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
div:hover span {
opacity: 1;
}
The problem I'm having is that in Firefox (Mac) the background image of the span is not quite aligned with the background image of the span so when it fades in you can see a small movement (In the codepen the shift is vertical but in my project where the code is amongst a whole lot of other junk I actually had a horizontal shift). If you resize the Firefox window the problem is fixed.
A screencast of the effect can be seen here:
https://dl.dropboxusercontent.com/u/3454522/firefox-fadebg-problem.mp4
(View at 100% to see the problem which is subtle).
Any idea on whats causing this or how to fix?
I think it's a regression in how Firefox renders images with opacity animation, especially when the images has been resized with HTML width/height attributes (usually by more than half).
The effect can be very subtle like a slight off-setting (~1 px) or a kind of antialiasing.
STR:
1. Open the testcase I joined
2. Move the mouse over the images to animate the opacity
3. Try at different zoom levels to observe the off-setting/antialiasing
WORKAROUND: adding "box-shadow: #000 0em 0em 0em;" to images fixes the bad rendering.
source: https://bugzilla.mozilla.org/show_bug.cgi?id=745549
I had the same problem. Solved it by adding the following to the images css.
transform: translate3d(0,0,0);