I'm trying to make a cube appear at the top of the page with css animation and keyframes.
but he appears at the beginning and only after does the animation.
how do i make it appear just from above?
I wanted that loads up the page and past two seconds the cube appeared.
<div id="cube"></div>
cube{
position: relative;
left:60px;
width:100px;
height:200px;
background:red;
-webkit-animation-name: cube;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 2s;
-webkit-animation-duration: 0.8s;
}
#-webkit-keyframes cube {
0% {top: -200px;}
100% {top: 0;}
}
here is my example
http://jsfiddle.net/hmmatos/epZJB/
Sorry if I've misunderstood your question, but I'm not really sure how you mean so I've done two different examples hoping that at least one of them will help you.
Demo One
What I've done here is I've added -webkit-animation-fill-mode: forwards; which will maintaine the last state of the animation, making the div stay visible at the position you have set.
Demo Two
In this demo, I'm animating the opacity instead of the positions.
So insted of sliding the div from top: -80; to top: 0; the div fill just fade into place. Also this example uses the -webkit-animation-fill-mode: forwards;.
Here's a good resource if you want to read about CSS animations.
http://www.w3.org/TR/css3-animations/
Hope this helps!
Related
I have hard time making scaling animation that is not choppy in Safari (mobile). By choppy I mean you can clearly see that it's not 60FPS fluid animation. I need to say that element is absolutely positioned so it should not affect layout, should it?
First thing that I tried is animating element by creating CSS animation with 2 keyframes, going from transform: scale(0); to transform: scale(1);. For the effect I want to achieve I also used transform-origin: top right;. I also tried to optimize it by setting will-change: transform; but it was choppy.
I scrapped it and reworked it so it uses transition: transform. So by default element has transform: scale(0);, when certain class attaches to it, it gets transform: scale(1); which transition is animating, but it is still choppy.
After some research I found out that you want to avoid animating properties that require browsers to recalculate layout. I found out this site which says that WebKit (which Safari is using as far as I know) pretty much recalculates layout for every property change. Is that true, and if it is how do you make 60FPS fluid animations on mobile Safari (on other platforms using Safari it's not that noticeable because they have much more resources to recalculate everything and it appears a bit smoother than on mobile)?
There are 2 things that you can try:
avoid using scale(0). In some browsers this gives problems. scale(0.01) is almost the same, and will be better for the browser.
Try to make the animation handled by the GPU instead of the CPU. this can be done with the following code
from: {transform: scale(0.01) translateZ(1px);}
to: {transform: scale(1) translateZ(1px);}
In reference to this article section Animate Changes in CSS Properties, you can animate with keyframes, but need use a percentage like this:
More examples in w3s article.
PD: if you add an example, i'll try to help you.
function animateStart(){
document.getElementById('ball').classList.add('bounce');
}
function animationPause(){
document.getElementById('ball').style.webkitAnimationPlayState='paused';
}
function animationContinue(){
document.getElementById('ball').style.webkitAnimationPlayState='running';
}
#-webkit-keyframes bounce {
0% {top: 100px; left: 1px; -webkit-animate-timing-function: ease-in;}
25% {top: 150px; left: 76px; -webkit-animate-timing-function: ease-out;}
50% {top: 100px; left: 151px -webkit-animate-timing-function: ease-in;}
75% {top: 150px; left: 226px -webkit-animate-timing-function: ease-out;}
100% {top:100px; left: 301px;}
}
.bounce {
-webkit-animation-name: bounce;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
.ball-style {
position:absolute; top: 100px; left: 10px;
height:100px; width:100px; border-radius:50px;
background:-webkit-radial-gradient(30% 30%, white, red 10%, black);;
}
.wall {
position:absolute; left: 400px; top: 100px;
height: 150px;
background: black;
}
<input type="button" value="Animate alternative"
onclick="document.getElementById('ball').classList.add('bounce');">
<input type="button" value="Animate" onclick="animateStart()">
<input type="button" value="Pause" onclick="animationPause()">
<input type="button" value="Continue" onclick="animationContinue()">
<div id="ball" class="ball-style"></div>
<div class="wall"> </div>
I don't know if this helps but are you using javascript to add a class and start the animation with the class change?
jQuery for example can cause long depth analysis in the dom when manipulating elements, this is likely to interfere with the performance you need for achieving the desired fps.
I'm trying to make a loading spiner with icon from https://materialdesignicons.com/ but the icon doesn't just rotate, it also moves slightly from the center.
I have these styles:
#keyframes spin-animation {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.spin:before {
display: block;
transform-origin: center center;
-webkit-backface-visibility: hidden;
-webkit-animation: spin-animation 2s linear infinite;
animation: spin-animation 2s linear infinite;
}
It's <i class="mdi mdi-something spin"> element. So it has added :before with content of the icon.
This element sits in an absolutely positioned wrapper, with display: flex, horizontally and vertically centered.
The problem is that when the icon rotates, it doesn't rotate around its center. The axis moves by a little. The icon doesn't stay in one centered position, instead it moves slightly.
I've tried:
Giving width and height to the i element
Giving width and height to the :before element
Moving the spiner animation from i to :before
Different styles which I've found on stackoverflow, e.g. transform-origin: center center;
The icon itself has the same x and y dimensions so it shouldn't be a problem. The dimensions change when it rotates, but I guess that's correct?
Have a look at Gabriele Petrioli answer in this thread: https://stackoverflow.com/a/14859567/1374439 on how to implement spin with CSS3.
Based on his suggestion the below worked perfectly for me.
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
It is now 2021, use mdi-spin
Example:
mdi mdi-loading mdi-spin
So in this simple example lets say you have an element that on hover has an animation that moves it to the right. Then when the mouse moves instead of jumping straight back to the original position it transitions back to that state.
#test{
position:absolute;
left:0;
transition:left 3s linear;
}
#test:hover{
animation:move 4s linear;
}
#keyframes move{
0%{
left:0;
}
100%{
left:300px;
}
}
<div id="test">Hover</div>
The result doesn't work in any either Edge or Chrome. Firefox works but only on the first animation. Any subsequent animations won't work until you refresh the page. So is this possible? And why does Firefox work once then stop?
So I am clearer this is an simple example. Sure this can be done with just transitions, but transitions are limited and not always possible. Also if you will notice a return animation isn't possible since it could be from an arbitrary point.
Rather than using the animation and transition properties, you can accomplish this using just the transition property.
#test{
position:absolute;
left: 0;
transition: left 4s linear;
}
#test:hover{
left: 300px;
transition: left 4s linear;
}
The issue you're having is that the animation must complete in order to transition into a different state. Furthermore, when you mouse out another animation needs to be added to the non-hover selector which animates from 300px back to 0px. To fix this, just use the transition property within the hover and non-hover selectors. However, this is really only a 2 state solution. If you want more granular control of the animation then you'll probably want to create two separate animations one for forward and one backwards.
Just use the transition on the non-hover selector. No need for animation here.
#test {
position:absolute;
left: 0;
transition: left 4s linear;
}
#test:hover {
left: 300px;
}
<div id="test">Hover</div>
I have a web page that contains five divs. A user can switch between the divs by clicking a next or previous button. If next is clicked, I fade-in the next div on top of the existing one and fade-out the existing div. Imagine something like flipping through some pictures.
My problem is, I am only animating the opacity property. Because of this, the users cannot interact with some of the elements of the visible div. My hunch is that its because there is an invisible div on top of it.
#keyframes fadeIn { from { opacity:0; } to { opacity:1; }}
#keyframes fadeOut { from { opacity:1; } to { opacity:0; }}
.fade-in {
opacity: 0;
position: relative;
top: 0;
left:1rem;
animation: fadeIn 0.3s ease-in;
animation-fill-mode: forwards;
}
.fade-out {
opacity: 1;
position: relative;
top:0px;
left:1rem;
animation: fadeOut 0.3s ease-in;
animation-fill-mode: forwards;
}
Is there a way using CSS, that I could change the display property from inline to none when the fade-out animation has completed? I know I could wire up some jQuery. However, that seems kind of clumsy. It seems like there should be a way for me to change an element from visible to hidden after the 0.3s have elapsed.
Any help is appreciated.
Yes, opacity will keep the invisible overlaying elements on-top.
Animate opacity, but at the same time toggle visibility from/to hidden/visible allowing interaction with underlying elements once an element is visibility:hidden
Also, instead of relative since you want a fade-trough effect, absolute should best fit your requirements.
I am trying to get this animation to stay in its last keyframe on hover but it keeps reverting back to the beginning. I don't mind if I hover off it reverts but not during the hover. I looked through a lot of stack questions and everyone said to uses the animation-fill-mode: forwards, but that doesn't seem to work.
Here is my code and a link to a jsfiddle
.circle:hover .spin {
-webkit-animation-name: drop;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes drop {
100% {
-webkit-transform: rotate(90deg);
}
}
For those of you with a similar problem, first make sure you are using animation-fill-mode: forwards. See this related question.
In this specific case, the following is relevant:
CSS Transforms Module Level 1
A transformable element is an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.
Since the .circle element is a span, it is inline by default, therefore the property transform: rotate() won't have an effect on it after the animation ends. Changing the display of it to either inline-block or block will solve the problem.
You should also be using the animation shorthand. In addition, add in other vendor prefixes:
Updated Example Here
.circle:hover .spin {
display:inline-block;
-webkit-animation: drop 1s 1 alternate ease-out forwards;
-moz-animation: drop 1s 1 alternate ease-out forwards;
animation: drop 1s 1 alternate ease-out forwards;
}