I'm using react and I have a button, when the button is clicked I want to rotate it by 180 deg, and when its clicked again, to rotate it again by 180 deg.
What I've managed to do is rotate it at the first time by 180, and in the second time by-180 deg.
jsx:
export default class SomeComponent extends React.Component {
render () {
let classes = 'icon';
if (this.props.isSelected) {
classes += ' selected';
}
return (
<IconButton className={classes}>expand_more</IconButton>
)
}
}
css:
.icon {
transition-duration: .5s;
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.6,0);
}
.icon.selected {
transform: rotate(180deg);
}
How can I achieve that in the best way?
By using a transition on the default state and an animation on the selected state, you can achieve the effect:
.icon {
transform: rotate(360deg);
transition: 300ms transform;
}
.icon.selected {
animation: spin 300ms;
transform: rotate(180deg);
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
I found that (at least in react-native) the CSS needed to rotate an element is defined as:
transform: [{rotate: '360deg'}]
Related
I'm using CSS keyframes to rotate an element on its hover state.
How do I make the element finish its animation even the mouse leave the element before it actually end?
For example, if I move my mouse out of the element(stop hovering) while the element only rotating to 180 degree (the full animation is 360 degree), it immediately stop the animation and go back to its original state instead of finish the animation.
#rotate {
width: 120px;
height: 120px;
background-color: orange;
}
#rotate:hover {
animation: rotating 1s ease 0s 1 normal forwards;
}
#keyframes rotating {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div id="rotate"></div>
You need to use Javascript for this, the following snippet is shown using some jQuery, a working example:
$("#rotate").on({
mouseenter() {
$(this).addClass("animated");
},
animationend() {
$(this).removeClass("animated");
},
});
#rotate {
width: 120px;
height: 120px;
background-color: orange;
}
.animated {
animation: rotating 1s ease 0s 1 normal forwards;
}
#keyframes rotating {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotate"></div>
Make sure that the class animated is with the animation, and #rotate is the box you want to spin.
This worked for my situation as it pauses and starts from where it left off. For simple rotation, this feels nicer than the jump you usually get from hovering in and out.
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.name-star {
right: 5px;
top: 15px;
animation: 5s rotate infinite;
animation-play-state: paused;
animation-timing-function: ease-in;
}
.mat-grid-tile:hover .name-star {
animation-play-state: running;
}
I have to animate the Toast Notifications, I am currently using the transition to show it coming from the top. It looks good to me, I want to stop the sudden moving of the other toast notifications so harshly, any way they can cover space smoothly ?
Current CSS :
.slds-transition-hide {
transition: all 0.5s;
}
.slds-transition-show {
transition: all 0.5s;
animation: show 0.5s forwards;
}
#keyframes show {
0% {
transform: translateY(-50px);
}
25% {
transform: translateY(-40px);
}
50% {
transform: translateY(-20px);
}
75% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
.slds-notify {
pointer-events: all;
}
Demo:
The elements are removed 0.5s after the fade out transition.
Additional Info: I am using LWC OSS, which is developed on Node JS.
In order to achieve the same, I added another animation on closing, so basically whenI want to hide I am adding slds-transition-hide.
I have added another animation to the original fadeout of transition-hide of SLDS lib where I am dereasing the max-height so the other elements can slide up.
.slds-transition-hide {
transition: all 0.5s;
animation: hide 0.5s forwards;
}
.slds-transition-show {
transition: all 0.5s;
animation: show 0.5s forwards;
}
#keyframes hide {
0% {
max-height: 150px;
transform: translateY(0px);
}
25% {
transform: translateY(-10px);
}
50% {
transform: translateY(-20px);
}
75% {
transform: translateY(-40px);
}
100% {
max-height: 0px;
padding: 0px;
transform: translateY(-50px);
}
}
So I have this arrow that rotates when the .collapse class is applied:
then
The css is:
.my-arrow {
background: url('arrow.svg');
transition: transform ease 0.2s;
transform: rotate(0deg);
&.collapse {
transform: rotate(90deg);
}
}
I also wanted to add a hover effect, for better user feedback.
But if I add:
.my-arrow {
&:hover {
rotate(90deg);
}
&.collapse {
&:hover {
rotate(0deg);
}
}
}
It works on hover, but when I click (= add the .collapse class), it rotates back to 0deg, because the mouse is still hovering the div, which is even more confusing.
Is there any way to tackle this issue? I guess I could do this is JS with an extra class that would toggle onmouseleave, but this is way too complicated for my use case.
I tried with CSS animations:
#keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(90deg);
}
}
#keyframes rotate-back {
0% {
transform: rotate(90deg);
}
100% {
transform: rotate(0);
}
}
.my-arrow {
&:hover {
animation: rotate .2s ease 1;
}
.collapse {
&:hover {
animation: rotate-back .2s ease 1;
}
}
without success, and I'm very n00b in CSS animations. Maybe with a delay?
Cheers
.hover-rotate{
transition: transform .3s; /* Apply the transition property. Enables the animation */
}
.hover-rotate:hover{
transform: rotate(90deg); /* Rotate if mouse is hovered */
}
.hover-rotate.collapse{
transform: rotate(90deg); /* Rotate if collapse class is present */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<i class="hover-rotate fa fa-chevron-right"></i>
You can use the CSS transition property to make this animation. The above code animates if either mouse hovers over the icon or the class .collapse is applied.
I have started building a website using ReactJS, I want to animate div elements into view when the view in scrolled to.
I have used CSS keyframes to add animations like so;
.animateMe {
animation: IntroWelcomeImageAnimation 3s 0.2s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}
#keyframes IntroLeftAnimation {
0% {
opacity: 0;
transform: translateX(-200px)
}
100% {
opacity: 1;
transform: translateY(0px)
}
}
#keyframes IntroRightAnimation {
0% {
opacity: 0;
transform: translateX(200px)
}
100% {
opacity: 1;
transform: translateY(0px)
}
}
#keyframes IntroWelcomeImageAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JS File
import React from 'react'
import '../../layout/intro.css';
const IntroPage = () => {
return (
<section className="Intro-Page">
<div className="animateme">
</div>
</section>
)
}
export default IntroPage
However the problem is that the animations only occur when the page is loaded as that is when the elements are too. How can I have it that they transition into view on scroll without using JQuery ?
Look at this library https://www.react-reveal.com/
there are many animations that can be triggered on scroll
Please tell me how to make a "smooth" animations.
I have the keyframes, which describes the behavior of the animation in the download. And at Hover, connects the other keyframes (animation and changes its course).
Between them the change occurs sharpness.
Here is an example of field http://jsfiddle.net/g4wvqrL8/
.icon-1 {
width: 3em;
height: 3em;
margin: 85px auto;
animation: pull 3s infinite reverse ease-in-out
}
.icons {
width:80%;
margin: 0 auto;
height:90px;
}
.icons:hover {
animation: rotate360 4s infinite reverse cubic-bezier(0.4, 0, 1, 1);
}
#keyframes pull {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-55px);
}
100%{
transform: translateY(0px);
}
}
#keyframes rotate360 {
0% {
transform: rotate(0deg) translateX(30px);
}
100% {
transform: rotate(360deg) translateX(30px);
}
}
Question: how at different keyframes at Hover to make the smooth transition of 2 types of animation?
I tried to make transition (shifts them to the desired trajectory at Hover and start a new animation, but smooth still was not).
Or how to start the animation with a place to stay until this animation ??
Prompt, all thanks in advance!