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; }
}
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 trying to use animation-direction: reverse to refactor my CSS keyframe animation. I have a container div when clicked will toggle an "active" class on it via jQuery which triggers the animation (forward or backward depending on the "active" state). The forward and backward animations are exactly the same thing except the keyframes are in the reverse order. I figured that animation-direction: reverse would enable me to refactor it by just using one animation and reversing it for the other, but it's not working the way I thought it would.
Link to codepen (without using animation-direction: reverse):
https://codepen.io/soultrust/pen/gogKjN
The following markup and CSS (Sass) code snippet is the way it works now without reverse.
<div class="container">
<div class="line"></div>
</div>
$width-height: 100px;
$duration: 1s;
$line-width: 10%;
$animation-distance: $width-height * .45;
#keyframes line-in {
0% { transform: translateY(-$animation-distance); }
50% { transform: translateY(0); }
100% { transform: rotate(-135deg); }
}
#keyframes line-out {
0% { transform: rotate(-135deg); }
50% { transform: translateY(0); }
100% { transform: translateY(-$animation-distance); }
}
.container {
margin: 10rem auto 0;
width: $width-height;
height: $width-height;
position: relative;
border: 1px solid black;
&.active {
.line {
animation-name: line-in;
animation-direction: normal;
}
}
}
.line {
width: 100%;
height: $line-width;
position: absolute;
top: 45%;
background-color: orange;
animation-direction: normal;
animation-name: line-out;
animation-duration: $duration;
animation-fill-mode: forwards;
}
When I change the "active" animation to following, animations in both directions stop working.
&.active {
.line {
animation-name: line-out;
animation-direction: reverse;
}
}
I believe it has something to do with using the same animation because if I just set the animation-direction: reverse and use animation-name: line-in, it correctly plays the line-in animation in reverse.
Very good question. You have already noticed that animation-direction: reverse; does work. You where very close to figuring out this css quirkiness all by yourself.
There are some additional rules to take note off.
When removing/replacing a css animation, the animation will start from 0%,
When you set reverse (while not changing the actual animation), the animation will continue from whatever % it was at.
So when you clicked the element and set the line-out animation:
The animation will start from 0%
Play in whatever direction you've set.
When only applying a new animation direction:
The animation continous from whatever percentage it was, eg, 100%.
You can restart the animation with several forms of trickery. you'll see that the animation is being played in reverse when the element is recreated.
var clickFunc =function(e) {
//toggle the state
$(this).toggleClass("active");
//reset the animatino state by cloning and replacing the element.
var newone = this.cloneNode(true);
this.parentNode.replaceChild(newone, this);
// reapply click handler to the cloned element
$(newone).click(clickFunc)
}
$(function() {
$(".question").click(function() {
$(this).toggleClass("active");
});
$(".answer").click(clickFunc);
$(".restart").click(function() {
$(".line").each(function() {
var newone = this.cloneNode(true);
this.parentNode.replaceChild(newone, this);
});
});
});
#keyframes line-in {
0% {
transform: translateY(-45px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotate(-135deg);
}
}
#keyframes line-out {
0% {
transform: rotate(-135deg);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(-45px);
}
}
.line {
width: 100%;
height: 10%;
position: absolute;
top: 45%;
background-color: orange;
animation-direction: normal;
animation-name: line-in;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.container {
margin: 1rem auto 0;
width: 100px;
height: 100px;
position: relative;
border: 1px solid black;
}
.container.reverse .line {
animation-name: line-in;
animation-direction: reverse;
}
.container.active .line {
animation-name: line-in;
animation-direction: reverse;
}
.container.active.reverse .line {
animation-name:line-in;
animation-direction: normal;
}
.container.out.active .line {
animation-name: line-out;
animation-direction: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="restart">reset animation state</button><br>
in -out
<div class="container question out">
<div class="line"></div>
</div>
active reversed
<div class="container question">
<div class="line"></div>
</div>
<br>
workaround
<div class="container answer reverse">
<div class="line"></div>
</div>
In order to debug this. You can inspect the animation states in the web dev tools of your browser:
With regards to your refactor:
I would rather have multiple animations in different directions, than doing js tricks in order to restart/reverse an animation.
Depending on how complicated your animation is, you might be better of using css transitions as opposed to animation frames. You would not have to worry about reversing/resetting the animation.
Their is bit complications but I think it isn't possible to do what I want with just CSS3 alone.
I have three images in header, I want images to show up with fade-in fade-out effect by using opacity in CSS animation.
I was thinking what if I could select nested elements in animation and animate them. Creating chain animation is bit difficult.
Try using transition-delay property to delay the animation.
Simply apply animation rules to your images. Using animation-delay a chain effect can be produced.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
background-color: #000;
}
img {
margin: auto;
width: 33.333%;
opacity: 0;
animation-name: fade;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes fade {
50% {
opacity: 1;
}
}
img:nth-child( 2 ) {
animation-delay: 0.5s;
}
img:nth-child( 3 ) {
animation-delay: 1s;
}
<img src="http://i.imgur.com/iyzGnF9.jpg">
<img src="http://i.imgur.com/iyzGnF9.jpg">
<img src="http://i.imgur.com/iyzGnF9.jpg">
I am wondering if there is a way in full CSS to reproduce the following animation (the tool-tip box that appears and disappears) and appears again.
I wanted it to be recursive
http://bourbon.io/
You can do this using animations properties (with a custom animation).
Example:
HTML
<div id="container">
<div id="animatediv">
</div>
</div>
CSS
#container {
background-color: yellow;
display: inline-block;
padding: 40px;
}
#animatediv {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: hideshow;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes hideshow {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Here's a jsfiddle:
https://jsfiddle.net/fabio1983/j6jj9766/
You can also check this page for more informations:
https://www.w3schools.com/css/css3_animations.asp
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