I have the following code for an image of a plane to come in from the left hand side of the page, land... ride on straight for 800px then take off again off the opposite side of the page.
But what is getting to me is the jerkiness between each percentage.
is there a away for it to smooth out the transitions between keyframes.
#keyframes plane-right {
0% {
visibility:visible;
transform: translate(-2000px, -400px) rotate(-20deg) scaleX(-1);
}
40% {
visibility:visible;
transform: translate(-400px, -0px) rotate(-0deg) scaleX(-1);
}
60% {
visibility:visible;
transform: translate(400px, -0px) rotate(-5deg) scaleX(-1);
}
100% {
visibility:visible;
transform: translate(2000px, -400px) rotate(-40deg) scaleX(-1);
}
}
Add animation duration and animation timing-function to control the length of the animation and the timing (smoothness).
.plane-right-div {
width: 100px;
height: 70px;
background-color: #bada55;
border-radius: 5px;
animation-name: plane-right;
animation-duration: 6s;
animation-timing-function: ease;
}
#keyframes plane-right {
0% {
visibility: visible;
transform: translate(-2000px, -400px) rotate(-20deg) scaleX(-1);
}
40% {
visibility: visible;
transform: translate(-400px, -0px) rotate(-0deg) scaleX(-1);
}
60% {
visibility: visible;
transform: translate(400px, -0px) rotate(-5deg) scaleX(-1);
}
100% {
visibility: visible;
transform: translate(2000px, -400px) rotate(-40deg) scaleX(-1);
}
}
<div class="plane-right-div"></div>
Add following animation-timing property to your image tag, this will help
transform-origin:50px 5px;
transition:transform 1s ease-in-out 0s;
animation-duration: 2.2s;
animation-name: paragato;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
Related
I have a modal sliding up fine in React using keyframes. I want it to slide down when closing. The slide up is triggered by a state and I am trying to trigger the slide down by setting the class to happen when the user clicks to close the button.
Not sure how to achieve this with keyframes.
Here is my code:
JSX
<div
className={classnames(styles.modal, {
[styles.toDisplayModal]: showModal,
[styles.toCloseModal]: closeModal,
})}
>
<div className={styles.container}>
<CloseButton onClick={closeModal} />
<div> text </div>
</div>
</div>
CSS modules & Key frames
.toDisplayModal{
margin: auto;
top: 10%;
position: fixed;
z-index: 999;
height: 100%;
animation: slideup 0.3s;
}
.toCloseModal {
animation: slidedown 0.3s;
}
#keyframes slideup {
0% {
transform: translateY(400px);
animation-timing-function: ease-out;
}
60% {
transform: translateY(20px);
animation-timing-function: ease-in;
}
80% {
transform: translateY(10px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0px);
animation-timing-function: ease-in;
}
}
#keyframes slidedown {
100% {
transform: translateY(0px);
animation-timing-function: ease-out;
}
80% {
transform: translateY(10px);
animation-timing-function: ease-in;
}
60% {
transform: translateY(20px);
animation-timing-function: ease-out;
}
0% {
transform: translateY(400px);
animation-timing-function: ease-in;
}
}
You need to add animation-fill-mode: forwards;.
.toDisplayModal{
margin: auto;
top: 10%;
position: fixed;
z-index: 999;
height: 100%;
border: 1px solid red;
animation: slidedown 0.3s 1;
animation-fill-mode: forwards;
}
#keyframes slidedown {
0% {
transform: translateY(0px);
animation-timing-function: ease-out;
}
60% {
transform: translateY(10px);
animation-timing-function: ease-in;
}
80% {
transform: translateY(20px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(400px);
animation-timing-function: ease-in;
}
}
<div class="toDisplayModal">
Modal
</div>
the first part of .toDisplayModal needs to be put inside .modal because this is the part responsible for showing the modal.
{
margin: auto;
top: 10%;
position: fixed;
z-index: 999;
height: 100%;
}
because you want the modal to be shown when it slides down.
Is it possible to comine css transform with some animation?
I have this tarnsform
transform: translate(-10%, 0px); left: 0px;
which works fine to animate slider left, right scrolling
but I would like to add some fade in animation from opacity 0 to 1
if i understand right, you want both translate and opacity to be included in an animation use this :
div {
width: 100px;
height: 100px;
background: red;
animation-name: fromleft;
animation-delay: 0s;
animation-duration: 0.8s;
animation-fill-mode: backwards;
animation-timing-function: ease-out;
}
#keyframes fromleft {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
<div>
</div>
I am trying to make an animation, where few elements would appear bigger than they are and shrink back to normal.
Here's what I've got:
One of the elements
#element {
position: absolute;
width: 38%;
height: auto;
animation: ani 250ms ease-in;
-webkit-animation: ani 250ms ease-in;
transform: rotate(82deg);
}
And keyframe
#keyframes ani {
0% {
transform: scale(1.5);
-webkit-transform: scale(1.5);
}
100% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
HTML
<div id="wrapper">
<img id="element" src="img.svg">
<img id="element2" src="img2.svg">
</div>
The problem is that whenever the animation starts, elements appear as they never been rotated and rotates only after animation ends. How could I force them to rotate before the animation?
you should combine the rotation code with transform in animation as well. basically rotate and scale both are the values of transform property, so if you only use scale in the animation, it will override rotate value and will only show the scale.
#element {
position: absolute;
width: 38%;
height: auto;
animation: ani 250ms ease-in;
-webkit-animation: ani 250ms ease-in;
transform: rotate(82deg);
}
#keyframes ani {
0% {
transform: scale(1.5) rotate(82deg);
-webkit-transform: scale(1.5) rotate(82deg);
}
100% {
transform: scale(1.0) rotate(82deg);
-webkit-transform: scale(1.0) rotate(82deg);
}
}
<div id="wrapper">
<img id="element" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<img id="element2" src="http://smallbusinessbc.ca/wp-content/themes/sbbcmain/images/circle-icons/icon-education.svg">
</div>
You need to move your rotate into the keyframes:
#element {
position: absolute;
width: 38%;
height: auto;
animation: ani 250ms ease-in;
-webkit-animation: ani 250ms ease-in;
}
#keyframes ani {
0% {
transform: scale(1.5) rotate(0deg);
-webkit-transform: scale(1.5) rotate(0deg);
}
100% {
transform: scale(1.0) rotate(82deg);
-webkit-transform: scale(1.0) rotate(82deg);
}
}
I'm trying to chain CSS3 animations together, but they behave very weird sometimes. For example, in this pen, why won't the last animation start? I got it working before, but it doesn't anymore, and I used the same setup. The code I'm pasting here is a little bit simplified, but the animations are exactly the same:
HTML:
<div class="box"></div>
CSS:
body {
padding: 60px;
}
.box {
width: 100px;
height: 100px;
background-color: black;
animation-name: fadeIn, fall, elastic;
animation-timing-function: ease, ease-in, ease-out;
animation-duration: 1s, 0.5s, 0.5s;
animation-delay: 0s, 0s, 0.5s;
animation-fill-mode: forwards, forwards, forwards;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fall {
0% { transform: translateY(-100px); }
100% { transform: translateY(0px); }
}
#keyframes elastic {
0% { transform: translateY(0px); }
20% { transform: translateY(60px); }
40% { transform: translateY(-20px); }
60% { transform: translateY(10px); }
80% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
Maybe I'm wrong... but it seems that this does not "chain" them since they play simultaneously. If that's the case, then the last one probably isn't working because you're already keyframeing translateY in the second animation.
Please refer to this fiddle: http://jsfiddle.net/eQegA/3/
<div class="spinner"></div>
.spinner {
width: 100px;
height: 100px;
border: 50px solid blue;
/*border-top-color: #fff;
border-bottom-color: #fff;*/ /* commented out to see the wobble better */
border-radius: 200px;
-webkit-animation: application-loading-rotate 1s;
animation: application-loading-rotate 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes application-loading-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes application-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
In Google Chrome the rotation is stable, however for some reason in IE11 there is a noticable "wobble" of the circle as it rotates.
Any ideas why it wobbles so? Is there any way to fix it in IE11?
For what it's worth, it also occurs on other browsers. It has to do, how the border is drawn, it's not a perfect round. As far as I know, there isn't a quick fix for this. However you can draw the border as a background image.
.spinner {
display:block;
width: 200px;
height: 200px;
border-radius: 100%;
background-image:url(http://www.clipartbest.com/cliparts/9iR/RyK/9iRRyKLie.png);
background-size:100%;
-webkit-animation: application-loading-rotate 1s;
animation: application-loading-rotate 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes application-loading-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes application-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
See:
http://jsfiddle.net/eQegA/26/