scrimba
CSS animations
Introduction to Transforms & Scaling
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Introduction to Transforms & Scaling
AboutCommentsNotes
Introduction to Transforms & Scaling
Expand for more info
index.css
run
preview
console
.box {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
width: 50px;
height: 50px;
background: red;
border: 1px solid black;
animation-name: transform;
animation-duration: 2s;
animation-iteration-count: infinite;
}

@keyframes transform {
100% {transform: /*Transform goes here*/;}
}
Console
/index.html
-6:43