I have this animation which I use for a div appear on screen so it comes from the bottom and stays at its final position.
#-webkit-keyframes slide {
from { opacity: 0; -webkit-transform: translateY(500px); }
to { opacity: 1; -webkit-transform: translateY(0); }
}
.module {
-webkit-animation: slide .4s 0 1 normal ease none;
}
I was thinking if it is possible that when I assign class='done' for that div it could take the same animation and play it reversely simulating the same effect hiding the div.
like:
.module.done {
-webkit-animation: slide .4s 0 1 alternate ease none;
}
but it seems it always start from the 1 iteration in the second case I would like to reverse the animation so it could start from the original position and then slide up 500px
Is it possible to achieve using the same animation or do I have to create a new one with inverted values?
Thanks
This specific use case works best with CSS transitions, plus you get free Opera and FF 3.5+ support. This is the basic syntax:
#notice {
-vendor-transition: -webkit-transform 2s ease;
}
#notice.pop {
-vendor-transform: translateY(50px);
}
When you add or remove .pop, the animation is automatically done for you.
Check out the working example:
http://jsfiddle.net/qLKzX/
I believe you can do this by setting the animation-delay to an appropriate negative value (so it starts at the first reversal).
Related
I want elements to appear one by one on the page with an animation. I created the animation but I don’t know how to hide (not display: none) the element while delay function is in use.
So, after 1 second, element appears with appear animation, however there must be something else to hide it before animation starts.
.insta {
animation: appear 0.4s linear 1s;
}
#keyframes appear {
0% {
opacity: 0;
transform: translateX(30%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
<p class=«insta»>Instagram</p>
Set opacity: 0. That hides your text. Using animation-fill-mode: forwards will let you have the properties added at the end of the animation.
You can solve it by adding an animation-fill-mode: both; to your CSS. That means that the browser will apply the animation's first frame until it starts, and its last frame after it has finished.
Since your animation starts with opacity: 0; and ends with opacity: 1;, no further modifications required.
You can also combine it into the animation property (just add a both keyword somewhere):
.insta {
animation: appear 0.4s linear 1s both;
}
#keyframes appear {
0% {
opacity: 0;
transform: translateX(30%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
<p class="insta">Instagram</p>
Try on CodePen (at least until the Stack Snippets server is down...)
I was looking at the webpage http://www.cuttherope.net on the current Google Chrome 38.0.x and saw that there are 4 icons in the middle of the page. When the mouse is over it, it has an icon squeezing effect: as if the icon is a pudding or jello squeezed on the side by a hand, and then bounce back to its natural size again.
I wonder how it is done: is it by HTML5 / CSS3, or how else is it done. I saw this div
<div class="game-icon resize"></div>
and if I use the developer tool to set display: none on it, then the icon will go away and have nothing showing, so this should be the div showing the effect, but if I examine the computed values, I do see an icon as a background, but all the computed values do not change when the mouse is over it or out of it. How is this done and is it part of HTML5 / CSS3's new features?
(if I disable JavaScript and reload the page, the effect still works, so apparently it is not done by JavaScript).
Yes, this is part of the CSS3 features (mainly transform )
If you want to have a similar effect without having to manually code it, have a look at this :
http://daneden.github.io/animate.css/
You can easily animate an element simply by adding two classes to it.
Found it! Yes, it's CSS3, and specifically the [-webkit-]animation: resize 0.2s linear; property. Disable that one and the effect stops.
I would guess it goes something like this:
img:hover {
-webkit-animation: squeeze 0.5s;
animation: squeeze 0.5s;
}
#-webkit-keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
#keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
<img src="http://placehold.it/100x100">
The CSS the other answers have pointed out
.resize:hover {
-webkit-animation: resize 0.2s linear;
animation: resize 0.2s linear;
}
References the following keyframe animation which is elsewhere in the CSS
#-webkit-keyframes resize {
0% { -webkit-transform:scale(1, 1) }
50% { -webkit-transform:scale(1.1, 0.9) }
100% { -webkit-transform:scale(1, 1) }
}
#keyframes resize {
0% { transform:scale(1, 1) }
50% { transform:scale(1.1, 0.9) }
100% { transform:scale(1, 1) }
}
The name resize is what links the two - it's not a keyword - you could call it boing and use
animation: boing 0.2s linear;
...
#keyframes boing {
Etc.
The keyframes say
at the beginning, scale to 100% x 100%
50% through the animation, scale to 110% x 90%
at the end, scale back to 100% x 100%
And the 0.2s in the animation property tells it to take 0.2 seconds to do the entire animation. The animation starts as soon as the style is applied, in this case when you hover.
This is my code:
http://jsfiddle.net/NVk2N/2/
I'm trying to fade the large background image in. I tried this:
#cover {
background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed;
background-size: cover;
height:100%;
width: 100%;
position:fixed;
opacity:0;
transition: opacity 2s;
}
however the image never appears. What am I doing wrong?
James
You actually need an animation of the opacity, in which you set animation-fill-mode: forwards so the last frame continues to apply after the final iteration of the animation.
Updated fiddle: http://jsfiddle.net/NVk2N/7/
#cover {
...
-webkit-animation: 2s show;
-moz-animation: 2s show;
-ms-animation: 2s show;
animation: 2s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
(of course you need to use vendor prefixes where necessary)
Note: If you need to fade-in only the background image (and not the whole element) you could load the background inside an absolute positioned pseudoelement (e.g. #cover:before) with a negative z-index and just apply the animation to the psuedoelement itself:
Here's an example on codepen: http://codepen.io/anon/pen/EJayr/
Relevant CSS
#cover {
position: relative;
width : ...;
height : ...;
}
#cover:before {
content : "";
position: absolute;
z-index : -1;
top : 0;
left : 0;
width : 100%;
height : 100%;
background: url(...) top left no-repeat;
-webkit-animation: 5s show;
-moz-animation: 5s show;
-ms-animation: 5s show;
animation: 5s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Animations on pseudoelements work fine on every modern browser (except in Chrome < 26 — as reported on issue #54699 — but not really a problem, since the current version at this moment is 34.0.1847.116)
you need to use some js code to trigger the animation property. just add a new class for #cover with opacity:1 and on body load assign this class to cover.
example
<body onload="document.getElementById('cover').classList.add('showed');">
To trigger a transition you actually need a trigger.
You are setting a opacity of "0" and this is what you get: 0 opacity.
The transition would work if the declaration of opacity would change from 0 to 1.
That is what transitions do.
The solution of Fabrizio Calderan with the Animation should do the job.
Working with the other answers that have been given will give you a fade on all the elements within that element so this will no achieve your desired result.
The best way to do this is to:
1) Create a div with a z-index of 1 which holds your background image and what you want to fade
2) Create another div with a z-index of 10 which holds your content which you dont want to fade and position it over the background div with position absolute.
3) Animate the background image with jquery animate
I hope this helps and that will give you your desired outcome!
I believe you may use keyframes and animations to get the job done.
It's not possible with purely css to fade only the background image. Reference: How to fade in background image by CSS3 Animation
The answer there explains that you may use <img> inside a <div> that you apply the fade animation on as there is no other way without anything but css.
How to prevent CSS3 transitions from reversing back?
For example: when i use
div
{
-webkit-transition:-webkit-transform 2s;
}
div:hover
{
-webkit-transform:rotate(360deg);
}
Whenever I move my mouse out it is rotating back,how to prevent it? SO that it only rotates forward when I place my mouse on the div and doesn't rotate back when my mouse leaves the div?
You have probably solved this already but in case you have not here is the solution to your particular problem of a 360 degree roll.
div
{
-webkit-transition: all 0.0s ;
-moz-transition: all 0.0s ;
-o-transition: all 0.0s ;
transition: all 0.0s;
}
div:hover
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
You can use CSS animations instead and set the animation-fill-mode property to forwards which will persist the end state.
Here's a quick demo. As you can see it only rotates 360 degrees and then stops (Is this want you want?). If you want it to keep rotating as long as you have the mouse over the div, then you can change forwards to infinite and set the animation-timing-function to linear (to keep a consistent speed).
Like this:
animation: rotate 2s linear infinite;
But it won't look good when you hover out, since it breaks the animation & I don't think there is a fix for this. I hope this helped. If not, maybe a JavaScript solution, as mentioned in the other answer, would be better.
And here's the code from the demo.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background: #333;
}
.box:hover {
-webkit-animation: rotate 2s forwards;
animation: rotate 2s forwards;
}
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes rotate {
100% { transform: rotate(360deg); }
}
Also with Javascript an CSS Animation will be reversing back (animated rotating backwards as many times as it has been turned forward before), if you for example have an image element rotated for a few times by clicking through a foto gallery and then try to close it using visibility:hidden;
The solution i found was to disable the CSS animation first, before changing the elements settings or hiding the element. This way it will not reverse:
document.getElementById("picture").style.transition = "none 0s linear";
That's how :hover works. It's only effective while your mouse is over the element. To do something more permanent, you would need JavaScript.
Would like to know how to hide an div after a set of css3 animation. Here's my code:
#box {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 150px;
background-color: red;
}
#box:hover {
-webkit-animation: scaleme 1s;
}
#-webkit-keyframes scaleme {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(3);
opacity: 0;
display: none;
}
}
<div id='box'>
hover me
</div>
Here's the jsfiddle sample for better illustration:
http://jsfiddle.net/mochatony/Pu5Jf/18/
Any idea how to do hide the box permanently, best without javascript?
Unfortunately there is no best solution using only CSS3. Animations always return to theirs default values (see at Safari Developer Library).
But you can try to play with -webkit-animation-fill-mode property.
For example:
#box:hover{
-webkit-animation:scaleme 1s;
-webkit-animation-fill-mode: forwards;
}
It's at least not immediately return a box to display:block; state.
Using JavaScript you can do this by using webkitAnimationEnd event.
For example:
var myBox = document.getElementById('box');
myBox.addEventListener('webkitAnimationEnd',function( event ) { myBox.style.display = 'none'; }, false);
Example on jsFiddle
Change your animation definition to:
-webkit-animation:scaleme 1s forwards;
This is a value for the animation fill mode. A value of 'forwards' tells the animation to apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed.
Of course in your example the animation style will be removed when the hover is removed. At the moment I can see the need for a small piece of JavaScript to add a class which triggers the animation. Since the class would never be removed (until the page is reloaded) the div would stay hidden.
Since elements of CSS animations end in their original CSS state, make the original state hidden by scaling it to zero or removing its opacity:
div.container {
transform: scale(0);
-webkit-transform: scale(0);
}
or
div.container {
opacity: 0;
}
Once the animation is completed, the div will go back to its original CSS, which is hidden.
That can (kind of) be solved without using JavaScript. Since animations use keyframes, what you ask for is possible by setting the duration time to a way too high value, say 1000s, and letting you transition end at a low frame, for example 0.1%.
By doing this, the animation never ends and therefore stay in shape.
#box:hover {
-webkit-animation:scaleme 1000s;
}
#-webkit-keyframes scaleme {
0% { -webkit-transform: scale(1); opacity: 1; }
0.1%, 100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}
1000s is not necessary in this particular example though. 10s should be enough for hover effects.
It is, however, also possible to skip the animation and use basic transitions instead.
#box2:hover {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
-moz-transform: scale(3);
-webkit-transform: scale(3);
opacity: 0;
}
I forked your fiddle and altered it, adding the two for comparison: http://jsfiddle.net/madr/Ru8wu/3/
(I also added -moz- since there is no reason not to. -o- or -ms- might also be of interest).