Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 months ago.
Improve this question
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.
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.
w3school
mozilla webdocs
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>
Related
See this animation:
The golden div has an animation where a custom property is animated
(#keyframes roll-o-1 animates --o).
This animates in steps.
The silver div has an animation where a normal property is animated
(#keyframes roll-o-2 animates left).
This animates continuously.
Why doesn't the golden div animate smoothly?
Is there any workaround which also uses variables?
#one {
width: 50px;
height: 50px;
background-color: gold;
--o: 0;
animation: roll-o-1 2s infinite alternate ease-in-out both;
position: relative;
left: calc(var(--o) * 1px);
}
#keyframes roll-o-1 {
0% {
--o: 0;
}
50% {
--o: 50;
}
100% {
--o: 100;
}
}
#two {
width: 50px;
height: 50px;
background-color: silver;
--o: 0;
animation: roll-o-2 2s infinite alternate ease-in-out both;
position: relative;
}
#keyframes roll-o-2 {
0% {
left: 0px;
}
50% {
left: 50px;
}
100% {
left: 100px;
}
}
<div id="one"></div>
<br>
<div id="two"></div>
When this question was asked, it wasn't possible to animate custom properties, as #temani afif correctly pointed out -
since the UA has no way to interpret their contents
Since then, CSS Houdini have put together the CSS Properties and Values API specification
This specification extends [css-variables], allowing the registration
of properties that have a value type, an initial value, and a defined
inheritance behaviour, via two methods:
A JS API, the registerProperty() method
A CSS at-rule, the #property rule
So now that you can register your own custom properties - including the type of the custom property - animating the custom property becomes possible.
To register the custom property via CSS - use the #property rule
#property --o {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
#one {
width: 50px;
height: 50px;
background-color: gold;
--o: 0;
animation: roll-o-1 2s infinite alternate ease-in-out both;
position: relative;
left: calc(var(--o) * 1px);
}
#keyframes roll-o-1 {
0% {
--o: 0;
}
50% {
--o: 50;
}
100% {
--o: 100;
}
}
#two {
width: 50px;
height: 50px;
background-color: silver;
animation: roll-o-2 2s infinite alternate ease-in-out both;
position: relative;
}
#keyframes roll-o-2 {
0% {
left: 0px;
}
50% {
left: 50px;
}
100% {
left: 100px;
}
}
#property --o {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
<div id="one"></div>
<br>
<div id="two"></div>
To register the property via javascript - use the CSS.registerProperty() method:
CSS.registerProperty({
name: "--o",
syntax: "<number>",
initialValue: 0,
inherits: "false"
});
CSS.registerProperty({
name: "--o",
syntax: "<number>",
initialValue: 0,
inherits: "false"
});
#one {
width: 50px;
height: 50px;
background-color: gold;
--o: 0;
animation: roll-o-1 2s infinite alternate ease-in-out both;
position: relative;
left: calc(var(--o) * 1px);
}
#keyframes roll-o-1 {
0% {
--o: 0;
}
50% {
--o: 50;
}
100% {
--o: 100;
}
}
#two {
width: 50px;
height: 50px;
background-color: silver;
animation: roll-o-2 2s infinite alternate ease-in-out both;
position: relative;
}
#keyframes roll-o-2 {
0% {
left: 0px;
}
50% {
left: 50px;
}
100% {
left: 100px;
}
}
<div id="one"></div>
<br>
<div id="two"></div>
NB
Browser support is currently limited to chrome (v78+ for registerProperty(), v85+ for #property) edge and opera
From the specification:
Animatable: no
Then
Notably, they can even be transitioned or animated, but since the UA has no way to interpret their contents, they always use the "flips at 50%" behavior that is used for any other pair of values that can’t be intelligently interpolated. However, any custom property used in a #keyframes rule becomes animation-tainted, which affects how it is treated when referred to via the var() function in an animation property.
So basically, you can have transition and animation on property where their value are defined with a custom property but you cannot do it for the custom property.
Notice the difference in the below examples where we may think that both animation are the same but no. The browser know how to animate left but not how to animate the custom property used by left (that can also be used anywhere)
#one {
width: 50px;
height: 50px;
background-color: gold;
animation: roll-o-1 2s infinite alternate ease-in-out both;
position: relative;
left: calc(var(--o) * 1px);
}
#keyframes roll-o-1 {
0% {
--o: 0;
}
50% {
--o: 50;
}
100% {
--o: 100;
}
}
#two {
width: 50px;
height: 50px;
background-color: silver;
--o: 1;
animation: roll-o-2 2s infinite alternate ease-in-out both;
position: relative;
}
#keyframes roll-o-2 {
0% {
left: calc(var(--o) * 1px);
}
50% {
left: calc(var(--o) * 50px);
}
100% {
left: calc(var(--o) * 100px);
}
}
<div id="one"></div>
<br>
<div id="two"></div>
Another example using transition:
.box {
--c:red;
background:var(--c);
height:200px;
transition:1s;
}
.box:hover {
--c:blue;
}
<div class="box"></div>
We have a transition but not for the custom property. It's for the backgroud because in the :hover state we are evaluating the value again thus the background will change and the transition will happen.
For the animation, even if you define the left property within the keyframes, you won't have an animation:
#one {
width: 50px;
height: 50px;
background-color: gold;
animation: roll-o-1 2s infinite alternate ease-in-out both;
position: relative;
left: calc(var(--o) * 1px);
}
#keyframes roll-o-1 {
0% {
--o: 0;
left: calc(var(--o) * 1px);
}
50% {
--o: 50;
left: calc(var(--o) * 1px);
}
100% {
--o: 100;
left: calc(var(--o) * 1px);
}
}
#two {
width: 50px;
height: 50px;
background-color: silver;
--o: 1;
animation: roll-o-2 2s infinite alternate ease-in-out both;
position: relative;
}
#keyframes roll-o-2 {
0% {
left: calc(var(--o) * 1px);
}
50% {
left: calc(var(--o) * 50px);
}
100% {
left: calc(var(--o) * 100px);
}
}
<div id="one"></div>
<br>
<div id="two"></div>
Not all CSS properties are animatable, and you cannot animate css variables. This is the list of the properties you can animate https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
I can do this with the new CSS Properties and Values API Level 1
(part of CSS Houdini; W3C Working Draft, as of 13 October 2020)
I only need to register my custom property with the #property rule
#property --o {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
Via the syntax property I declare this custom property to be of type <number>, which hints the Browser in which way the calculations for transitioning or animating of this property should take place.
Supported values for the syntax property are listed here
"<length>"
"<percentage>"
"<length-percentage>"
"<color>"
"<image>"
"<url>"
"<integer>"
"<angle>"
"<time>"
"<resolution>"
"<transform-function>"
"<custom-ident>"
Browser compatibility is surprisingly strong, since this is an experimental feature and in draft status (See caniuse also). Chrome and Edge support it, Firefox and Safari don't.
#property --o {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
#one {
width: 50px;
height: 50px;
background-color: gold;
--o: 0;
animation: roll-o-1 2s infinite alternate ease-in-out both;
position: relative;
left: calc(var(--o) * 1px);
}
#keyframes roll-o-1 {
0% {
--o: 0;
}
50% {
--o: 50;
}
100% {
--o: 100;
}
}
#two {
width: 50px;
height: 50px;
background-color: silver;
--o: 0;
animation: roll-o-2 2s infinite alternate ease-in-out both;
position: relative;
}
#keyframes roll-o-2 {
0% {
left: 0px;
}
50% {
left: 50px;
}
100% {
left: 100px;
}
}
<div id="one"></div>
<br>
<div id="two"></div>
Maybe not the answer you're looking for, but I achieved this using javascript animation (fx with gsap)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,html {
height: 100%;
display: flex;
}
.wrapper {
margin: auto 0;
}
.box {
--animate:0;
background-color: tomato;
height: 70px;
width: 70px;
transform: translateX(calc(var(--animate) * 1px)) rotate(calc(var(--animate) * 1deg));
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
<button onclick="play()">Play</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const tween = gsap.to(".box",{
"--animate":900,
duration:10
})
tween.pause();
function play() {
tween.progress(0);
tween.play();
}
</script>
</body>
</html>
I have made a strap of hexagon shapes on my website that slowly animate the background color to have a "twinkle" effect. You can see it in action at https://taketwicedailey.com/. I made the hexagon shaped elements using a tutorial I found online. It involves making a rectangle element and then positioning the ::before and ::after options as rhombus shapes at the top and bottom of the rectangle element (If there is a better way, let me know, I am new to web building).
What I then wanted to do is have a forever looping animation of the group of hexagon shapes that changes the background color. Then I wanted to set this animation to start at different times for different elements based on an nth-of-type selector. I developed all of this using Google Chrome, on which it works beautifully with no issues, that you can verify yourself.
The problem comes when you use Firefox. It seems that the animation does not want to be inherited by the ::before and ::after options, which gives a bow-tie looking effect. This seems to have happened in a recent update in Firefox because this was not an issue a while ago. I have tried everything from defining the animation inside the ::before, ::after definition, to using !important flags, but the mechanism behind this apparent bug is far beyond my understanding here.
I included my CSS below, thanks in advance for any help.
.hex-group {
position: absolute;
top: 470px;
left: 60%;
width: 250px;
margin: 0px;
font-size: 0;
text-align: center;
z-index: -5;
overflow: visible;
}
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -7;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: inherit !important;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n) {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1){
animation-delay: -5s;
}
.hex:nth-of-type(4n+2){
animation-delay: -10s;
}
#keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
I think that this is a legitimate Firefox bug, but for now I have found the following workaround. You can "over-specify" the animation to the ::before and ::after elements like so
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -5;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n),
.hex:nth-of-type(4n):before,
.hex:nth-of-type(4n):after {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1),
.hex:nth-of-type(4n+1):before,
.hex:nth-of-type(4n+1):after {
animation-delay: -5s;
}
.hex:nth-of-type(4n+2),
.hex:nth-of-type(4n+2):before,
.hex:nth-of-type(4n+2):after {
animation-delay: -10s;
}
#keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
I want when the component is open to make an animation or to make a fade.
This is the code
This is the HTML
<div *ngIf="showMePartially" class="container">
<div class="body-container">
</div>
</div>
This is the CSS
.container {
position: fixed;
z-index: 1;
padding-top: 100px;
transition: opacity 0.5s ease-in;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
transition: 3s;
}
.body-container {
width: calc(100% - 73em);
position: relative;
left: 70em;
top: 7.5em;
background: white;
height: calc(100% - 18em);
border-radius: 4px;
padding-left: 11px;
transition: opacity 0.5s ease-in;
animation-direction: normal;
}
You can use css animation:
.body-container {
/* above styles */
animation: animation-name .3s ease-out forwards;
}
#keyframes animation-name {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
You can make your own animation inside of keyframes. This should work, because *ngIf will either remove element from dom, if condition is false, or append it into dom(this is when animation should work).
EDIT
For left to right animation you can do like:
#keyframes animation-name {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
This question already has answers here:
What is the opposite of :hover (on mouse leave)?
(13 answers)
Closed 5 years ago.
Im trying to animate a round border, that becomes square when you hover, and goes back to a circle after you unhover. Despite my best efforts, i can't seem to make it work. Here is what i have so far.
#keyframes mymove {
from {
border-radius: 100% 100%;
}
to {
border-radius: 0px, 0px;
}
}
#keyframes mymoveback {
from {
border-radius: 0px 0px;
}
to {
border-radius: 100%, 100%;
}
}
.testButt {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 3s;
/* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation: mymoveback 3s;
animation-fill-mode: forwards;
}
.testButt:hover {
-webkit-animation-fill-mode: forwards;
animation: mymove 2s;
animation-fill-mode: forwards;
}
<br><br><br>
<div class="testButt">
<br><br> Log In
</div>
You over complicate it, simply use transition like this:
.testButt {
width: 100px;
height: 100px;
padding:40px 0;
text-align:center;
box-sizing:border-box;
background: red;
position: relative;
border-radius: 50%;
transition: 0.5s;
}
.testButt:hover {
border-radius: 0%;
}
<div class="testButt">
Log In
</div>
Something like this:
HTML:
<button>Hover Me!</button>
And CSS:
button {
display: block;
width: 60px;
height: 60px;
text-decoration: none;
padding: 5px;
border: 1px solid red;
border-radius: 30px;
transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000)
}
button:hover {
border-radius: 0;
}
And link to fiddle:
Hover and round animation
I needed spinning effect on hover of that square, what i can get is written below.
HTML
<div class="mainSquare">
<div class="firstInnerSquare">
<div class="lastInnerSquare">
Hello
</div>
</div>
</div>
CSS
.mainSquare{
width:160px;
height:160px;
background:black;
margin: 50px auto;
padding:25px;
}
.firstInnerSquare{
width:110px;
height:110px;
background:red;
padding:25px;
}
.lastInnerSquare{
text-align:center;
width:110px;
padding: 46px 0px;
background:white;
}
Fiddle
Hope to get help.
You can do this by using a single element and two pseudos. Make the 2 pseudo elements larger than the container element, position them behind the container and add a rotate animation to them.
Note: This is only a base sample that would help you get started. I would leave the fine tuning part for you to handle. You can read more about the CSS animation properties in this MDN page.
.shape {
position: relative; /* used to position the pseudos relative to the parent */
height: 100px;
width: 100px;
background: white;
border: 1px solid;
margin: 100px; /* required because children are larger than parent */
}
.shape:after,
.shape:before {
position: absolute;
content: '';
}
.shape:before {
height: 125%; /* make one pseudo 25% larger than parent */
width: 125%;
top: -12.5%; /* 25/2 to make sure its center is same as the parent's */
left: -12.5%; /* 25/2 to make sure its center is same as the parent's */
background: red;
z-index: -1; /* send it behind the parent */
}
.shape:after {
height: 150%; /* make this pseudo larger than the parent and the other pseudo */
width: 150%;
top: -25%; /* 50/2 to make sure its center is same as the parent's */
left: -25%; /* 50/2 to make sure its center is same as the parent's */
background: black;
z-index: -2; /* send it behind both the parent and other pseudo */
}
/* add animation when hovering on parent */
.shape:hover:before {
animation: rotate 3s linear infinite;
}
.shape:hover:after {
animation: rotate-rev 3s linear infinite;
}
#keyframes rotate {
to {
transform: rotate(359deg); /* some browsers don't display spin when it is 360 deg */
}
}
#keyframes rotate-rev {
to {
transform: rotate(-359deg); /* reverse direction rotate */
}
}
<div class='shape'></div>
Here's one with the original structure and just one keyframe statement:
All that needs changing, per div, is the animation duration and direction. The "middle" div's timing needs to be 50% of the outer/inner.
.mainSquare {
width: 160px;
height: 160px;
background: black;
margin: 50px auto;
padding: 25px;
animation: spin 2s infinite linear;
}
.firstInnerSquare {
width: 110px;
height: 110px;
background: red;
padding: 25px;
animation: spin 1s infinite linear reverse;
}
.lastInnerSquare {
text-align: center;
width: 110px;
padding: 46px 0px;
background: white;
animation: spin 2s infinite linear;
}
#keyframes spin {
to {
transform: rotate(1turn);
}
}
<div class="mainSquare">
<div class="firstInnerSquare">
<div class="lastInnerSquare">
Hello
</div>
</div>
</div>