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>
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.
I have an SVG which represent a cannon that is constantly rotating (from -5 deg to -80deg), and I want it to stop rotating on hover and apply a transform (scale - it should look like it's firing in a cartoonish way). Everything works but the rotation angle is reset to the original value: I want it to retain the angle it has when you hover it. Thanks for any hint.
.cannon {
bottom: 60px;
display: block;
left: 2%;
position: absolute;
width: 10%;
animation: cannon-change-pitch;
animation-direction: alternate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
transform-origin: 35% 80%;
}
.cannon:hover {
animation: cannon-fire;
animation-direction: alternate;
animation-duration: 30ms;
animation-iteration-count: 2;
}
#keyframes cannon-change-pitch {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(-80deg);
}
}
#keyframes cannon-fire {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1.2);
}
}
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;
I just built a small animation and it does exactly as I want it to, except a small problem, I have bounceIn animation on 2 HTML elements, my HTML is below:
<div class="test animated bounceInDown">
<span class="animated bounceInDown delay">I am animation</span>
</div>
My CSS:
.test {
height: 200px;
width: 200px;
background-color:yellow;
display: table;
}
.test span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.animated {
-webkit-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
.delay {
-webkit-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
Now of course span is a child of the div, on the span I have a animation-delay, problem is, the animation on the span has a small bug: it follows the animation of the div and then executes its own animation, I.E. on page load, the span element still bounces in with the div even though I have an animation delay.
I am more interested in WHY this is happening than HOW to solve my problem. Here's a fiddle to see what I am talking about: Fiddle
Nothing is wrong about your animation. Just that the configuration of your animation is not good.
The problem appear because before the animation trigger. The text will be render within the animating parent.
When your text got triggered by animation it will animation on it own. Which mean it will be move up with 3000px.
=> should concern about animation a child in within an animating parent.
When you apply animation to an element, all child elements too undergo the animation. So, in your case, span tag too animates with the parent.
After time in animation-delay's value passes after page load, the animation on child span takes place.
This isn't a bug. Its the way animations work on child elements.
To fix the problem: Just simply use opacity with your animation and animation-fill-mode and it will do the trick
http://jsfiddle.net/ev5ur00n/2/
.test {
height: 200px;
width: 200px;
background-color:yellow;
display: table;
}
.test span {
display: table-cell;
vertical-align: middle;
text-align: center;
opacity: 0;
}
.animated {
-webkit-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
.delay {
-webkit-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: none;
opacity: 1;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
.bounceInDown2 {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
<div class="test animated bounceInDown">
<span class="animated bounceInDown2 delay">I am animation</span>
</div>
I was thinking about making an animation where, for example, a circle is falling from the top of the screen/website to the bottom and then it starts to rotate without end. I have the idea but I don't know how to describe it in CSS.
This is what I have done so far and get stuck:
#circle {
border-radius: 50%;
border-top-color: red;
width: 200px;
height: 200px;
bottom: 0px;
#circle {
animation-name: falling;
animation-duration: 5s;
#keyframes falling {
0% {
bottom: 100%;
}
50% {
bottom:0%;
}
100% {
transform: rotate(360deg);
}
I have no idea how I can make an iteration in the "100%" step. Please give me some advice
Demo Fiddle
You can chain animations in CSS by listing their settings in sequence after the relevant CSS animation properties.
Crucially you want to set the animation order, and their respective durations:
animation: falling 1s, rotate 2s;
Then queue them to start sequentially:
animation-delay: 0s, 1s;
So..the above basically says that the falling animation will last 1 second, play it immediately... then play the rotating animation after 1 second (when falling has finished)
It is also important to specify only playing the falling animation once, but loop the rotation:
animation-iteration-count: 1, infinite;
Importantly, dont reset the falling animation state on completion...so the circle stays at the bottom of the page, for the rotation..keep it cyclical:
animation-fill-mode: forwards, both;
HTML
<div id='circle'></div>
CSS
#circle {
border-radius: 50%;
border: 4px solid red;
width: 20px;
height: 20px;
bottom: auto;
position:absolute;
animation: falling 1s, rotate 2s;
animation-delay: 0s, 1s;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, both;
-webkit-animation: falling 1s, rotate 2s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards, both;
}
#keyframes falling {
0% {
bottom: 100%;
}
100% {
bottom:0%;
}
}
#keyframes rotate {
0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(360deg);
}
}
#-webkit-keyframes falling {
0% {
bottom: 100%;
}
100% {
bottom:0%;
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(360deg);
}
}