KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
I want to animate two (or more) CSS transform properties separately using keyframe animation like this: @keyframes translatex { 100% { transform: translateX(100px); } } @keyframes rotatez { 100% { transform: rotateZ(80deg); } } HTML: <div class="rect"></div> The translatex animation should start with a 0s delay and last for 5 seconds. The rotatez animation should start with a 1s delay and last for 3 seconds. The .rect element starts moving, then after 1 second it starts rotating, then after 3 seconds it stops rotating and after 1 more second it finishes its movement. Apply animation: .rect { animation-name: translatex, rotatez; animation-duration: 5s, 3s; animation-timing-function: ease, ease-in-out; animation-delay: 0s, 1s; animation-direction: forward, forward; } The problem is that only the rotatez animation is applied. Are there ways to implement the animation using only CSS, such as keyframe animation or transitions, or do I need JavaScript and requestAnimationFrame ?
Tags (comma-separated)
Save Edits
Cancel