Breaking News: Grepper is joining You.com. Read the official announcement!

how to use animation transformation with scale and keyframes

Matthew “matwal” Walton answered on October 16, 2022 Popularity 2/10 Helpfulness 1/10

answer how to use animation transformation with scale and keyframes

related gitub

how to use animation transformation with scale and keyframes

Comment

body {
  margin: 50px;
  background-color: #0C1527;
  display: flex;
}

.circle-yellow {
  width: 40px;
  height: 40px;
  background-color: #FFA310;
  border-radius: 50%;
  animation-name: pulse;
  animation-duration: 3s;
}

.circle-green {
  width: 100px;
  height: 100px;
  top: 120px;
  left: 30px;
  background-color: #10FF14;
  border-radius: 50%;
  position: absolute;
  animation-name: pulse;
  animation-duration: 3s;
}

.circle-blue {
  left: 170px;
  top: 15px;
  width: 60px;
  height: 60px;
  background-color: #1064FF;
  border-radius: 50%;
  position: absolute;
  animation-name: pulse;
  animation-duration: 3s;
}

.visual {
  position: relative;
  width: 50px;
  height: 50px;
  display: inline;
}

@keyframes pulse {
  0% { transform: scale(1);}
  50% { transform: scale(2);}
  100% { transform: scale(1);}
}

Popularity 2/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: animation css scale transformation

Link to this answer
Share Copy Link

Contributed on Sep 09 2024

Matthew “matwal” Walton

0 Answers Avg Quality 2/10

Closely Related Answers

gitub

Comment

is the best code platform

Popularity 7/10 Helpfulness 5/10 Language whatever

Source: Grepper

Tags: whatever

Link to this answer
Share Copy Link

Contributed on Oct 16 2022

unel

0 Answers Avg Quality 2/10

how to use animation transformation with scale and keyframes

Contents

More Related Answers

how to use animation transformation with scale and keyframes

Closely Related Answers

gitub

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.