Question 216434 in CSS Question posted in
Some basic documentation can be found here.

Css – Rotate and Scale at same time

Iam trying to rotate an element once, but scale the element back and forth in an infinite loop. However, when I chain the two animations, only the last one runs. How do I make two different animations to work together?

 .shape{
            width:100px;
            height:50px;
            background-color: brown;
        }

        .ani1{
            animation:  scale 2s linear infinite alternate, rotate 5s ease forwards;
        }
        @keyframes rotate {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
 
        @keyframes scale {
            0%{
                transform: scale(1)
            }
            100%{
                transform: scale(2)
            }
        }
    <div class="shape ani1"></div>
Tags:

2

Answers


  1. 0

    To achieve the desired effect of rotating the element once and then scaling it back and forth in an infinite loop, you need to make a few adjustments to your CSS and animation definitions. One way to accomplish this is by using keyframes for both the rotation and scaling animations and then combining them in a single animation definition. Here’s the updated CSS code:

    .shape {
width: 100px;
height: 50px;
background-color: brown;
animation: rotateAndScale 7s linear infinite;
}

@keyframes rotateAndScale {
0%, 100% {
    transform: rotate(0deg) scale(1);
}
50% {
    transform: rotate(360deg) scale(2);
}
}
    Login or Signup to reply.
  2. 0

    On modern browsers CSS property scale is implemented so you could keep your current structure but use that instead of transform.

     .shape{
            width:100px;
            height:50px;
            background-color: brown;
        }

        .ani1{
            animation:  scale 2s linear infinite alternate, rotate 5s ease forwards;
        }
        @keyframes rotate {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
 
        @keyframes scale {
            0%{
               scale: 1;
            }
            100%{
               scale: 2;


            }
        }
        <div class="shape ani1"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search