Make css animation

by vsasikalabe Updated: Mar 7, 2023

Guide Kit

An animation is used to change an element from one style to another. You can change as many CSS properties as many times as you want. Declare keyframes to use CSS animation. Keyframes hold the styles of the element. The CSS property will set whether an animation should play forward, backward, or alternate back and front. The span tag is used for marking up a part of a text or a document, and it is an inline container. Using the id attribute or class, the span tag is manipulated with JavaScript or easily styled by CSS. The span tag is like the div element, but the element and span are inline.

When a user hovers over an element with their cursor, the element responds with motion or another animated effect, and a CSS hover animation occurs. Hover animations will highlight the items on a web page. This is an effective way to enhance your site's interactivity. When using CSS hover animations, your imagination is the limit.

Here are some of the coolest animations:

Sass Hover Effects
Button Hover Effects
CSS Image Hover Effects
Creative Menu Hover Effects
Social Media Icons Hover Effect
Zoom Animation on Hover
Flip Animation on Hover
Rotate Animation on Hover
Pause Animation on Hover

Here is an example of how to Make CSS Animation:

Preview of the output that you will get on running this code from your IDE.

Code

How can i make css animation

HTMLLines of Code : 52License : Strong Copyleft (CC BY-SA 4.0)

#stage {
  width: 20rem;
  height: 15rem;
  background: green;
  border: black 1px solid;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

span {
  color: white;
  font-size: 150%;
}

#left-curtain, #right-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10rem;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#left-curtain {
  background: red;
  left: 0;
}

#right-curtain {
  background: blue;
  right: 0;
}

#stage:hover #left-curtain {
  left: -10rem;
}

#stage:hover #right-curtain {
  right: -10rem;
}
<div id="stage">
  <span>PEEK - A - BOO!</span>
  <div id="left-curtain">Mouse</div>
  <div id="right-curtain">Over</div>
</div>

Instructions

Follow the steps carefully to get the output easily.

Download and Install VS Code on your Desktop.
Open the VS Code and install Live Server from Extensions.
Open the new file and save as filename.html.
Copy the code using the "Copy" button above, and paste (line no1 to 47 within the style tag) it in your html file.
Click Go live button in the bottom right corner to get the output.

I hope you found this useful. I have added version information in the following sections.

I found this code snippet by searching for ' make css animation in html' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created in VS Code 1.73.1 version.
Live Server v5.7.9

Using this solution, we are able to make css animation with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to make css animation.

Support

For any support on kandi solution kits, please use the chat
For further learning resources, visit the Open Weaver Community learning page

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

Make css animation

Code

Instructions

Environment Tested

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow