how to use animation-iteration-count when using animation

Matthew “matwal” Walton answered on May 21, 2022 Popularity 1/10 Helpfulness 1/10

answer how to use animation-iteration-count when using animation

related CSS animation-iteration-count

related how to use animation-timing-function with your animation

how to use animation-iteration-count when using animation

Comment

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

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

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

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

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

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

Popularity 1/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: animation css using when

Link to this answer
Share Copy Link

Contributed on Sep 09 2024

Matthew “matwal” Walton

0 Answers Avg Quality 2/10

Closely Related Answers

CSS animation-iteration-count

Comment

div {
  animation-iteration-count: 2;
}

Popularity 9/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on May 21 2022

naly moslih

0 Answers Avg Quality 2/10

how to use animation-timing-function with your animation

Comment

#item1 {
    width: 40px;
    height: 40px;
    background-color: #FFA310;
    animation: move 5s;
    /*speeds up first, then slows down*/
    animation-timing-function: ease;
}

#item2 {
    width: 40px;
    height: 40px;
    background-color: #10FF14;
    animation: move 5s;
    /*constant speed*/
    animation-timing-function: linear;
}

#item3 {
    width: 40px;
    height: 40px;
    background-color: #1064FF;
    animation: move 5s;
    /*starts slow, then speeds up*/
    animation-timing-function: ease-in;
}

#item4 {
    width: 40px;
    height: 40px;
    background-color: #C73447;
    animation: move 5s;
    /*starts fast, then slows down*/
    animation-timing-function: ease-out;
}

@keyframes move {
    0% { left: 0;}
    100% { left: 250px;}
}

div {
    margin-top: 30px;
    position: relative;
}

Popularity 3/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css animation

Link to this answer
Share Copy Link

Contributed on Sep 09 2024

Matthew “matwal” Walton

0 Answers Avg Quality 2/10

how to use animation-iteration-count when using animation

Contents

More Related Answers

how to use animation-iteration-count when using animation

Closely Related Answers

CSS animation-iteration-count

how to use animation-timing-function with your animation

Grepper

Documentation

Social

Legal

Contact

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