I'm trying to create a CSS3 sliding animation. The slideDown part works, but the going up part doesn't seem to trigger instantly and I can't figure out why.
.slideUp{
-webkit-animation:slideUpFrames 1s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes slideUpFrames{
0%{
max-height:1000px;
}
100%{
max-height:0px;
}
}
.slideDown{
-webkit-animation:slideDownFrames 1s;
-webkit-animation-fill-mode: forwards;
}
.slidable{
overflow: hidden;
}
#-webkit-keyframes slideDownFrames{
0%{
max-height: 0px;
}
100%{
max-height:1000px;
}
}
I've created a fiddle (webkit only): http://jsfiddle.net/5E7YQ/
How could I fix this?
The slideUp animation is triggering immediately you just can't see the first 940px of the animation, because your <ul class="slidable"> is only 60px tall.
So now that we know what's going on here's how it can be fixed:
Working Example
.slideUp {
-webkit-animation:slideUpFrames .5s; /* shorten time */
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes slideUpFrames {
0% {
max-height:60px; /* change 1000px to the height of the element */
}
100% {
max-height:0px;
}
}
.slideDown {
-webkit-animation:slideDownFrames .5s; /* shorten time */
-webkit-animation-fill-mode: forwards;
}
.slidable {
overflow: hidden;
}
#-webkit-keyframes slideDownFrames {
0% {
max-height: 0px;
}
100% {
max-height:60px; /* change 1000px to the height of the element */
}
}
Or if you would like you can shorten the whole thing and use .slideUp(); and .slideDown();
Working Example 2
Related
Hi I am trying to implement css animation, i have implemented #keyframes
but my animation is not applied to my div.
my keyframe is
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Please tell me where i am wrong.
You have done everything right but you haven't created the class which will implement animation
Create two css class as follows
.fadeIn {
animation-name: fadeIn;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
animation-name is the name of your keyframes in your example i.e. fadeIn.
Now use those two class in your div where ever you want to implement.
Hope this helps.
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
0% {top: 0px;opacity:0;}
100% {top: 100px;opacity:1;}
}
</style>
<div></div>
I'm coding a CSS3 effect fired on mouseover; this effect simply animate an inner div scaling it endlessly.
All works great, but when I move the mouse away the div suddenly return to its original size. I would like to add a smooth effect to scale the div back.
I already checked the suggestion of this post:
Make CSS Hover state remain after "unhovering"
Unfortunately the code posted doesn't work :(
In my opinion my issue could be related with the "infinite" loop of the scale effect.
THe goal I would like to gain is the on mouse-out the image could return to its original size smoothly.
Here's the code: https://jsfiddle.net/9dtqpsLa/1/
CSS
#keyframes imageZoom{
0% { transform: scale(1); }
50% { transform: scale(1.24); }
100% { transform: scale(1);}
}
#-moz-keyframes imageZoom{
0% { -moz-transform: scale(1);}
50% { -moz-transform: scale(1.24); }
100% { -moz-transform: scale(1); }
}
#-webkit-keyframes imageZoom{
0% { -webkit-transform: scale(1); }
50% {-webkit-transform: scale(1.24); }
100% { -webkit-transform: scale(1); }
}
#-ms-keyframes imageZoom{
0% { -ms-transform: scale(1); }
50% { -ms-transform: scale(1.24); }
100% { -ms-transform: scale(1); }
}
.article:hover .imageWrapper {
animation: imageZoom linear 10s;
animation-iteration-count: infinite;
-webkit-animation: imageZoom linear 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation: imageZoom linear 10s;
-moz-animation-iteration-count: infinite;
-ms-animation: imageZoom linear 10s;
-ms-animation-iteration-count: infinite;
transform-origin: 50% 80%;
}
.article {
background-color: #e6e6e6;
overflow: hidden;
width: 300px;
height: 300px;
}
.imageWrapper {
background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
width: 300px;
height: 300px;
}
HTML
<div class="article">
<div class="imageWrapper">
</div>
</div>
Please, could you help me?
Thanks so much
GOALS:
1. Have the image animate expansion and contraction on hover
2. Have the image animate to original state on mouseleave
PROBLEMS:
With CSS, I don't know how to use both an animation and a transition. The animation is the pulsing on hover. The transition is the return to default animation. The only way I could envision doing it is with JS. See each section for notes
https://jsfiddle.net/Bushwazi/9dtqpsLa/5/
HTML:
notes: same as example provided
<div class="article">
<div class="imageWrapper"></div>
</div>
CSS:
notes:
1. animation removed.
2. The scale is only fired with the existence of [data-dir='expand'].
3. transform-origin and transition moved into the default state of .imageWrapper
4. need to add prefixes
.article[data-dir='expand'] .imageWrapper {
transform:scale(1.24)
}
.article {
background-color: #e6e6e6;
overflow: hidden;
width: 300px;
height: 300px;
}
.imageWrapper {
background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
width: 300px;
height: 300px;
transform-origin: 50% 80%;
transition:all 10.0s linear 0.0s;
}
JAVASCRIPT:
notes:
1. all new
/*
1. on hover aka 'mouseenter' start the animation
2. 10 seconds in, change direction of the animation based on the `isHovering` variable
3. on exit aka 'mouseleave', return to default
*/
var thisArticle = document.querySelector('.article'),
thisTimer = '',
isHovering = false;
thisArticle.addEventListener('mouseenter', function(){
console.log('mouseenter');
thisArticle.setAttribute('data-dir', 'expand');
thisTimer = setInterval(fireAnimation, 10000);
isHovering = true
}, false);
thisArticle.addEventListener('mouseleave', function(){
console.log('mouseleave');
thisArticle.removeAttribute('data-dir');
isHovering = false;
clearInterval(thisTimer);
}, false);
var fireAnimation = function(){
if(isHovering){
if(thisArticle.getAttribute('data-dir') === 'expand'){
thisArticle.removeAttribute('data-dir');
} else {
thisArticle.setAttribute('data-dir', 'expand');
}
} else {
clearInterval(thisTimer);
}
alert('change direction');
}
MORE IDEAS
1. I used a data attribute, but I would prefer to use classList. Wasn't sure how to incorporate that into the fiddle in 30 seconds, so skipped it.
2. The return to default animation has no awareness of the scale when you leave, so it takes 10 seconds no matter what. I'm sure there is a way to make this better.
Once you the mouse is moved away from the element, the styles in the :hover pseudo class gets removed from your element, effectively putting it back where it started.
What you want to do is start and pause the animation:
Here is your fiddle, I edited it a bit and exploded the short-hand and removed -webkit, -ms, etc:
https://jsfiddle.net/9dtqpsLa/4/
#keyframes imageZoom {
100% {
transform: scale(4);
}
}
.article:hover .imageWrapper {
animation-play-state: running;
}
.article {
background-color: #e6e6e6;
overflow: hidden;
width: 300px;
height: 300px;
}
.imageWrapper {
background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
width: 300px;
height: 300px;
transform-origin: 50% 80%;
animation-name: imageZoom;
animation-duration: 2s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: both;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
animation-play-state: paused;
}
Notice that all the animation logic has moved to the base class, and the :hover only kicks off the animation.
Is it possible to change the background color of <p> element after few seconds ( 10 to 20 seconds ) using css fiddle? I don't want to use js.
<p style="background:#E1FEE0;">Human</p>
Using a CSS animation, you could just jump from 99.9% to 100%. Just set the initial background color (#E1FEE0) within 99.9%, then the final background color within 100%. If you want the color to transition, just increase the gap and use something like 80% for example.
Example Here
p {
display: inline;
animation: background-fade 10s forwards;
}
#keyframes background-fade {
99.9% {
background:#E1FEE0;
}
100% {
background:#000;
}
}
Other vendor prefixes omitted for simplicity and brevity.
Actually You can.
You should use CSS animation to achieve this.
Here's example of CSS declaration:
#-webkit-keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
#-moz-keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
#-o-keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
#keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
.animated {
-webkit-animation: change-color 2s infinite; /* Safari 4+ */
-moz-animation: change-color 2s infinite; /* Fx 5+ */
-o-animation: change-color 2s infinite; /* Opera 12+ */
animation: change-color 2s infinite; /* IE 10+ */
}
Try this on JSFiddle.
For more reading, here's the link about CSS animations.
we have this h1 here
<h1 class="in">hello</h1>
and css for this is
.in{
-webkit-animation:mymove1 3s 1;
}
.in:hover {
-webkit-animation:nextT 3s 1;
-webkit-animation-fill-mode:forwards;
}
#-webkit-keyframes "mymove1"
{
0% {opacity:0;
margin-left:0px;}
100% {opacity:1;
margin-left: 8px;}
}
#-webkit-keyframes "nextT"
{
0% {
-webkit-transform:scale(1);
}
100% {
-webkit-transform:scale(1.2);
}
}
so onload animation work properly and when i hover it grows up that's what i want but when i remove my mouse from the h1 the "mymove1" animation start again. i cloud not understand why this is happening help me out.you can also check the code working on
jsFiddle
Heres the code if you want it to change opacity on pageload & resize when you hover without the 'mymove1' animation restarting.
<style>
.in{
animation:mymove1 3s 1;
transform:scale(1);
/*If You want the hover to ease in and out*/
transition:transform 1s ease-in-out 0s;
}
.in:hover {
transform:scale(1.2);
}
#keyframes mymove1
{
0% {opacity:0;
margin-left:0px;}
100% {opacity:1;
margin-left: 8px;}
}
</style>
I'm trying to get a CSS animation property to stay after completing, is this possible?
This is what I'm trying to achieve...
The element should be hidden when the user lands on the page, after 3 seconds (or whatever), it should fade in and once the animation has completed it should stay there.
Here is a fiddle attempt...
http://jsfiddle.net/GZx6F/
Here is the code for preservation...
<h2>Test</h2>
<style>
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.9;
}
}
h2 {
animation: fadeIn 1s ease-in-out 3s;
}
</style>
I know how to do this with jQuery.. it would be like this...
<h2>test</h2>
<script>
$(document).ready(function(){
$('h2').hide().delay(3000).fadeIn(3000)
});
</script>
I think you're looking for animation-fill-mode CSS3 property
https://developer.mozilla.org/en/CSS/animation-fill-mode
The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.
for your purpose just try to set
h2 {
animation: fadeIn 1s ease-in-out 3s;
animation-fill-mode: forwards;
}
Setting forwards value «the target will retain the computed values set by the last keyframe encountered during execution»
In addition to the answer of #Fabrizio Calderan, it has to be said that you can even apply the animation-fill-mode property forwards directly to animation. So the following should also work:
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.9;
}
}
h2 {
opacity: 0;
animation: fadeIn 1s ease-in-out 3s forwards;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>
How to animate an element and get it to stay as the animation is done:
// Beggin
#box {
/* Give it a width, a height and a background so can see it */
width: 200px;
height: 200px;
/* Unimportant styling */
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
border-radius: 7px;
background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
/* Starts here: */
opacity: 0;
animation: yourName 2800ms ease-in-out 0s forwards;
}
#keyframes yourName {
0% /* (from) */ {
opacity: 0;
}
100% /* (to) */ {
opacity: 1;
}
}
<div id="box"></div>
I had something similar happening to me. I added position:relative to the element that was animating and that fixed it for me.
If I understand your question, you want the animation to remain in the final state .
I would use fill mode
animation-fill-mode: forwards;