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>
Related
I am trying to implement some animation onLoad without Javascript. JS is easy, CSS is ... not.
I have a div which should be on display: none; and should be display: block; after 3 secondes. Lots of resources told me animate does not work with display, but should with visibility (which I use often in my transition).
Right know I have this terrible javascript function :
<script type="text/javascript">
$(document).ready(function(){
$(".js_only").hide();
setTimeout(function () {
$(".js_only").show();
}, 3000);
});
</script>
I tried some animation in CSS but no result ... nothing seems to work.
I have few animation in my page, but just struggling with the display: none; on animation.
#-moz-keyframes showEffect {
0% { display: none; visibility: hidden; }
100% { display: block; visibility: block; }
}
#-webkit-keyframes showEffect {
0% { display: none; visibility: hidden; }
100% { display: block; visibility: block; }
}
#keyframes showEffect {
0% { display: none; visibility: hidden; }
100% { display: block; visibility: block; }
}
.css_only {
-moz-animation-name: showEffect;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 2.3s;
-webkit-animation-name: showEffect;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 2.3s;
animation-name: showEffect;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2.3s;
}
It is important as hidden, this element does not take space at all. I created a JSFiddle to make quite tests.
My main concerne is SEO ... I don't think the JS option is really nice for that which is why I would like a pure CSS alternative. Also interested to test those animations and see where are those limits (Am I seeing one right now ?). Kinda having fun on such challenge.
Thanks for reading, hope someone has an answer.
You are correct in thinking that display is not animatable. It won't work, and you shouldn't bother including it in keyframe animations.
visibility is technically animatable, but in a round about way. You need to hold the property for as long as needed, then snap to the new value. visibility doesn't tween between keyframes, it just steps harshly.
.ele {
width: 60px;
height: 60px;
background-color: #ff6699;
animation: 1s fadeIn;
animation-fill-mode: forwards;
visibility: hidden;
}
.ele:hover {
background-color: #123;
}
#keyframes fadeIn {
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
<div class="ele"></div>
If you want to fade, you use opacity. If you include a delay, you'll need visibility as well, to stop the user from interacting with the element while it's not visible.
.ele {
width: 60px;
height: 60px;
background-color: #ff6699;
animation: 1s fadeIn;
animation-fill-mode: forwards;
visibility: hidden;
}
.ele:hover {
background-color: #123;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
<div class="ele"></div>
Both examples use animation-fill-mode, which can hold an element's visual state after an animation ends.
Use animation-delay:
div {
width: 100px;
height: 100px;
background: red;
opacity: 0;
animation: fadeIn 3s;
animation-delay: 5s;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Fiddle
You can play with delay prop of animation, just set visibility:visible after a delay, demo:
#keyframes delayedShow {
to {
visibility: visible;
}
}
.delayedShow{
visibility: hidden;
animation: 0s linear 2.3s forwards delayedShow ;
}
So, Where are you?
<div class="delayedShow">
Hey, I'm here!
</div>
Unfortunately you can't animate the display property. For a full list of what you can animate, try this CSS animation list by w3 Schools.
If you want to retain it's visual position on the page, you should try animating either it's height (which will still affect the position of other elements), or opacity (how transparent it is). You could even try animating the z-index, which is the position on the z axis (depth), by putting an element over the top of it, and then rearranging what's on top. However, I'd suggest using opacity, as it retains the vertical space where the element is.
I've updated the fiddle to show an example.
Good luck!
you can't animate every property,
here's a reference to which are the animatable properties
visibility is animatable while display isn't...
in your case you could also animate opacity or height depending of the kind of effect you want to render_
fiddle with opacity animation
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.
I am trying to perform a rotate on the Y axis of an element that contains a background-image. When I reach 50% of that animation, I would like to change the image.
The problem:
The background-image is also animated
I am trying to do this without the use of Javascript.
Is that possible?
Code:
.picture {
background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png');
display: inline-block;
vertical-align: top;
border: 5px solid red;
width: 250px;
height: 250px;
background-size: 100% 100%;
border-radius: 100%;
}
.animated {
-webkit-animation-name: turns;
animation-name: turns;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes turns {
0% { background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); -webkit-transform: rotateY(0deg); }
1% { background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); }
50% { background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); }
51% { background-image: url('http://i3.mirror.co.uk/incoming/article172940.ece/alternates/s615/image-16-jim-carrey-50th-birthday-604638636.jpg'); }
100% { background-image: url('http://i3.mirror.co.uk/incoming/article172940.ece/alternates/s615/image-16-jim-carrey-50th-birthday-604638636.jpg'); -webkit-transform: rotateY(180deg); }
}
jsFiddle: http://jsfiddle.net/dmzj7cfh/1/
If the problem that you have is that the background image change does nt happen in the 50% of the rotation, it's because the timing funciont is applied for the individual steps in the case of the background (because it is set in every keyframe), but for the full animation in the case of the rotation.
The easiest way to solve it is to set
-webkit-animation-timing-function: linear;
so that it doesn't matter the above problem
I have also fixed a problem with the background size.
fiddle
You should probably use multiple animation keywords to simplify, as you need to change two different properties.
For background-image animation, use animation-timing-function: steps(2); and for transform: rotate;, use linear function to simplify the keyframes.
Using non-linear functions like ease and custom cubic-bezier()s can create a lot of complexities.
FIDDLE
Snippet :
div{
display: inline-block;
border: 5px solid red;
width: 250px;
height: 250px;
background-size: cover;
border-radius: 100%;
-webkit-animation-name: animate, background;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear, steps(2);
animation-name: animate, background;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-timing-function: linear, steps(2);
background-image: url('http://i.imgur.com/gmucjHi.png');
position: relative;
}
#-webkit-keyframes animate {
0% {transform: rotateY(90deg);}
100% {transform: rotateY(450deg);}
}
#-webkit-keyframes background {
0% {background-image: url('http://i.imgur.com/gmucjHi.png');}
100% {background-image: url('http://i.imgur.com/mZinlRQ.jpg');}
}
#keyframes animate {
0% {transform: rotateY(90deg);}
100% {transform: rotateY(450deg);}
}
#keyframes background {
0% {background-image: url('http://i.imgur.com/gmucjHi.png');}
100% {background-image: url('http://i.imgur.com/mZinlRQ.jpg');}
}
<div></div>
Note : I haven't added vendor prefixes other than -webkit-.
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
I have a header inside of a DIV and I would like to add in a transition so it slides into view a couple of seconds after the pages loads.
Is this possible using CSS alone? I understand how transitions and transform works but they load in immediately and that isn't what I want.
In order for this to work, you'll need to place the CSS at the bottom of your Body content, to ensure the DOM has rendered as well as any other CSS/scripts run (e.g. the page has loaded). That said, the better way would be to listen to the document load event in Javascript, and apply a transitioning class at that point, as noted by Josiah in the comment to your question.
Demo Fiddle
HTML
<div id="slidingContent"></div>
CSS
html,body{
padding:0;
margin:0;
}
#slidingContent {
height: 100px;
width: 100%;
margin-top: -120px;
color: red;
background-color: grey;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.3s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:forwards;
animation-name: slideIn;
animation-duration: 0.3s;
animation-delay: 2s;
animation-fill-mode:forwards;
}
#-webkit-keyframes slideIn {
0% { margin-top: -120px; }
100% { margin-top: 0px; }
}
#keyframes slideIn {
0% { margin-top: -120px; }
100% { margin-top: 0px; }
}