Issue
I have been wondering how to animate an HTML element using CSS
I have no idea how to do so...
I tried to use the animate keyword.
Solution
you can't just animate anything by just adding animate keyword you have to add keyframes and tell the element from where it should start and where it should end. read about css animation. here are some resources.
here is a sample snippet to you can see and get an idea of it works from this snippet.
* {
font-family: cursive;
}
h1 {
text-align: center;
}
/* all css animation properties */
/* animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state */
/* CSS animations shorthand property */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* From To Transitions */
.from_to {
height: 250px;
width: 250px;
animation-name: unrivalledking;
animation-duration: 1s;
animation-timing-function: ease-in;
animation-delay: 0;
animation-iteration-count: 10;
animation-direction: normal;
animation-fill-mode: forwards;
/* CSS animations shorthand property */
/* animation: unrivalledking 1s ease-in 0 4 alternate forwards; */
}
/*
@keyframes identifier (write animation name instead of identifier) {
} */
@keyframes unrivalledking {
from {
background-color: red;
margin-left: 0;
}
to {
background-color: orange;
margin-left: 30%;
}
}
/* Percent Keyframes */
.percent {
margin-left: 20%;
margin-bottom: 500px;
height: 250px;
width: 250px;
position: relative;
animation: unrivalledking2 3s linear 0s infinite normal forwards;
}
.percent::after {
content: "This is it";
color: white;
font-size: 20px;
margin-left: 70px;
}
@keyframes unrivalledking2 {
0% {
background-color: red;
top: 0;
left: 0;
rotate: 0deg;
}
25% {
background-color: rgba(255, 0, 0, 0.5);
top: 0;
left: 250px;
rotate: 90deg;
}
50% {
background-color: orange;
top: 250px;
rotate: 180deg;
left: 250px;
}
75% {
background-color: rgba(255, 166, 0, 0.5);
top: 250px;
rotate: 270deg;
left: 0px;
}
100% {
background-color: red;
top: 0px;
rotate: 360deg;
left: 0px;
}
}
<body>
<h1>CSS Animations</h1>
<hr />
<h2>From-To Keyframes Animations</h2>
<div class="from_to"></div>
<hr />
<h2>Percent Keyframes Animations</h2>
<div class="percent"></div>
</body>
Answered By - UNRIVALLEDKING
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.