animation properties css

<style>
@keyframes animatename{
  0%{
    transform: translateY(3px);
  }
  100%{
    transform: translateY(-3px);
  }
}
.my-div{
  animation: animatename 1s linear infinite;
  /* animation shorthand */
  animation: animation-name animation-duration animation-direction animation-iteration-count
}
</style>

View another examples Add Own solution

Log in, to leave a comment

4.22

9

Dedicated 90 points

                                    body{
background-color: purple;
}

@keyframes party{
    0% {background-color: red;}
    10% {background-color: orange;}
    20% {background-color: yellow;}
    30% {background-color: green;}
    40% {background-color: blue;}
    50% {background-color: purple;} 
}

@-webkit-keyframes party{
    0% {background-color: red;}
    10% {background-color: orange;}
    20% {background-color: yellow;}
    30% {background-color: green;}
    40% {background-color: blue;}
    50% {background-color: purple;} 
}

Thank you! 9

4.22 (9 Votes)

0

4

1

TimmyRS 95 points

                                    &lt;html&gt;
  &lt;body id=&quot;bd&quot;&gt;
    &lt;button onclick=&quot;party()&quot;&gt;Press Me!&lt;/button&gt;
  &lt;/body&gt;


&lt;/html&gt;

Thank you! 1

4 (1 Votes)

0

4

3

Zach Zhao 105 points

                                    &lt;style&gt;
.my-element {
  width: 100%;
  height: 100%;
  animation: tween-color 5s infinite;
}

@keyframes tween-color {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: red;
  }
}

html,
body {
  height: 100%;
}
&lt;style&gt;

&lt;body&gt;
	&lt;div class=&quot;my-element&quot;&gt;&lt;/div&gt;
&lt;/body&gt;

Thank you! 3

4 (2 Votes)

0

4.5

2

Samuel Ghartey-Tagoe 110 points

                                    animation: name time func delay iteration dir fill play;
animation: none 0s ease 0s 1 normal none running;

Thank you! 2

4.5 (2 Votes)

0

5

1

Karl Morrison 80 points

                                    function party(){
  document.body.style.animation = 'party 2.5s infinite linear';
}

Thank you! 1

5 (1 Votes)

0

Are there any code examples left?

Find Add Code snippet

New code examples in category CSS

CSS 2022-03-27 22:50:16 make text bigger html5
CSS 2022-03-27 21:40:08 move list item to left css
CSS 2022-03-27 21:35:05 reduce image size css
CSS 2022-03-27 21:30:21 css image background center horizontally in div
CSS 2022-03-27 21:05:02 css button styles
CSS 2022-03-27 18:50:09 compass font awesome
CSS 2022-03-27 18:50:06 modal in materialize css
CSS 2022-03-27 17:55:12 box round corner css
CSS 2022-03-27 17:45:12 jquery add css
CSS 2022-03-27 17:45:01 css image fit in div with aspect ratio

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

animation using css animation css all properties all css animation properties css animation animation in css for css animation css for csss animation css The animation Property animation: html css which css are using for animation css animation* animation css propert css animation in w3school attributes of animation in css how to write animations in css css animations' css animation + w3schools animation() css animation properites css css for animation animation shorthand property css how to use animation css how to animations css css @animation animation use in html css css3 animation animations using css css element animation cs animation how to use animations css css animation attributes animation properties css element animations using animations in css w3c css animation w3 schools css animation how to add an animation in css animation entries css animation css attributes css animations. animation % css animated properties css how to put in an animation in css animation in css animations css w3schools what is the css for animations animation css in w3schools animation css propertry how to do animation with css animation css] css.animation what properties are used in css animation animation attribute css css properties for animation css animation tags using animation in css css style animation how to implement animation in csss csss animation w3 animation in style how use css animation css animation w3 how to display with animation in css animation css properties www.animation .css animation .css animation in css w3schools use css for animation on htmls animation all properties css how to use animation in css w3 schools css animations CSS animation propertiies how to do animation css css animations w3schools animations property css animations in html and css animation short form css css animation all properties animation attribute in css css animation attribute animation values css animation property what kind of css animations are there animation inn css ... animation css animation attributes css animation css in css3 html animations with css how to do animation in css animation css3 properties how to animation in css animation property css syntax animation property syntax css css html animations css properties in animation HTML ANIMATION PROPERTY how to apply animations in css all animations tags in css css animation for html animation incss css how to do animation css animation css .animation in css understanding css animations animation a css css animation code animation in css w3school CSS animations! css animation\ how to give animation in css css animation s how to do animations in css animation in html with css in animations css css animation property shorthand animation css and html animation in html and css css animations w3 schools csss animation shorthand css animationbs animations on css w3schools CSSs html animation using css animations css animation syntax how to animation in html css animation cs animation in html&css css animation definition css animationd animation: css w3school css animation animation short in css html csss animation css property animation animation css what are the css animation properties https://www.w3schools.com css animations animations on css css animation in html html animation css animate.css animate css use animation in css animations example css w3 animation css animation + css animation on CSS animated css css use animation animation syntax in css animation: in css csss animation css and html animation animations.css css animation how to use css animationn animations in css and html w3 css animation @ animations css animation from css css animation in css animation css w3schools css animation: animation shorthand w3schools how to use css animation animation html css animations with css html css animations css animation css animation css animation commands css animation property css animation w3schools animation css w3c properties animation css w3c animation property shorthand how add animation in css w3.css animation animation property in css w3schools css animation w3s css animation # animiaction css css loading animation css keyframes shorthand animation write how many times to repeat animations in html css css animation html css animation examples with source code css animation site example create animation css animation css syntax style.animation CSS Animations Courses animation css course element animation css animations examples types of animation in css animation how to add animation on html css css animation properties css animation exa how to show tag with animation in css css animater css anipatio css animation duration css animation arguments how to do css animations css animations disney animate tag css css animaiton animation html animae.css elementor animations css anim css animate how to animate div in css css repeat animation css anmiation animated content box in html css animation tutorial gooey css animation css animation syntac css infinete animation in image filter animated section in html css cool css animations css javascript animation css animationi shorthand how to define an animation in css animation image css css create animation animation css examples html animations css motion css animation projects animation properties css css animtion basic css animations how to write animation in css csp animation how to add animation in css animation css shorthand animaiton css css ri animation animation css property animation animate 5s vertical infinite how to make animation in html/css how to make a css animation moz animation animation of css css animation frameworks animation short hand css In the Animation properties anomation in css how to use css animations animation syntax css aniimation ss animated html css play animations infinite animation in csss tags that define an CSS3 property animation animation css \ animation using css animations css What property allows for the animation of HTML documents using CSS3? --animation css css animation examples animation in css3 animation.css css3 animation html how to apply animation in vendure animation shorthand animation infinite css origin different animation styles css css animination examples css animination on of css animate loop animation on left and right property animation time reapeat css loop animation css 1line animation syntax slidein infinite auto animate in css left to right anmation shorthand css animation property of css correct animation shorthand animation one time css how create animation using html and css different animation styles in css animation and css example webkit animation properties how to animated in css css animation shorthand for delay css The animation initial animation css css animation repeat animation infinite animation repeat once css css transition infinite specifying animation css appear animation css animation-type css css animation infinite loop animate loop css how to loop animation CSS animation arguments css css webkit animation animation loop css animaition css mdn css animate property css animation type animation css how to loop animation in css from to css not infinite create animation in css @animation css loop css animation css animations mdn css animation one line animation css not infinite how to set an animation infinite times in css excellent css loop animation animate css types css animation infinate loop animation in css animated div css animation css example css animate opaction loop animation .css html css animation css animation infinite loop animation css right direction css infinite animaton css css animation types animation csss object animation css css anmation make animation loop css mdn css animation create infinite line css animation infinite loop css animation css property order animate.css repeat how ro ddo animation in css css set initial animation css animation mdn animation css mdn css animation options how to make a animation in css animation prefix scss meaning which css properties to animate make animation infinite css css anomations css animation shorthand animation types css css animation loop pulse css animation MDN animation shorthand property types of animation css3 animation property css css animation shorthand order animations in css how to use animations in css animation duration infinite css aniations animation in css html mdn animation animation short hand css3 animation animation css 1 time css animation infinite alternate animation in css shorthand animation css animation css w3 animation shorthand css how to set animation in css animation with css css animations css aniamtion aniamtion css animation css css animation w3 schools html animation css animation

Made with love

Welcome Back!

Sign up to unlock all of IQCode features:

Test your skills and track progress
Engage in comprehensive interactive courses
Commit to daily skill-enhancing challenges
Solve practical, real-world issues
Share your insights and learnings

Create an account

Create a Free Account

Sign up to unlock all of IQCode features:

Test your skills and track progress
Engage in comprehensive interactive courses
Commit to daily skill-enhancing challenges
Solve practical, real-world issues
Share your insights and learnings

Create an account

Creating a new code example