Please help, when I'm trying to play animation with moving ball in position X and Y at the same time it doesn't work, some strange behaviour. I would like to look like a batted and falling ball
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball-x 2s, fly-ball-y 2s;
}
#keyframes fly-ball-x {
100% {
transform: translateX(300px);
}
}
#keyframes fly-ball-y {
100% {
transform: translateY(100px);
}
}
<div class="ball"></div>
**The result I'm expecting is like the code below:**
#keyframes fly-ball-x {
100% {
left: 300px;
}
}
#keyframes fly-ball-y {
100% {
bottom: 0;
}
}
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball-x 2s cubic-bezier(0.17, 0.67, 0.6, 1), fly-
ball-y 2s;
}
<div class="ball"></div>
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball 2s
}
#keyframes fly-ball {
100% {
transform: translateX(300px) translateY(100px);
}
}
<div class="ball"></div>
It is because you weren't running the animations concurrently. Here both translations are just being run at the same time. You just had a bit more than you needed.
EDIT
Check out this blog post. It gives explanations on the kinds of curves it seems you are going for Curved Path Animations In CSS
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 a simple scaling animation applied to a circle using keyframes.
There is an unexpected and undesirable line that scales with the circle in Chrome Version 85.0.4183.102 (Official Build) (64-bit) and not in Firefox or Safari.
I cannot remove it - do you know how to? I have tried adding border: 0 to the various divs unsuccessfully.
#parent { overflow: hidden; background: #F0F4FF; height: 500px; width: 100%; position: relative; user-select: none; margin-block-end: 5rem; z-index: 3; }
.child { width: 100%; height: 100%; }
.child .inner { background: radial-gradient(circle at center, #D90368 20%, #F0F4FF 20%); }
.inner { position: relative; left: 0; top: 0; animation: circle 2s linear infinite; display: block; height:100%; width: 100%; content: " "; }
#keyframes circle { 0% { transform: scale(0.5) } 50% { transform: scale(1.2) } 80% { transform: scale(0.95) } 100% { transform: scale(1.0) } }
<div id='parent'>
<div class='child'>
<span class='inner'></span>
</div>
</div>
I have tried to search SO however I find a lot of similar line / scale / keyframe posts but these are intentional line animation posts.
I had the line to on Chrome. So I edited the code a bit, and the line was gone. Not sure what the problem was, just a different solution:
The html:
<div id="parent">
<div class="child">
<div class="inner"></div>
</div>
</div>
And the CSS
#parent {
overflow: hidden;
background: #f0f4ff;
height: 500px;
width: 100%;
position: relative;
user-select: none;
margin-block-end: 5rem;
z-index: 3;
}
.child {
width: 100%;
height: 100%;
position: relative;
}
.inner {
background-color: #d90368;
width: 10rem;
height: 10rem;
position: absolute;
left: calc(50% - 5rem);
top: calc(50% - 5rem);
animation: circle 2s linear infinite;
display: block;
content: " ";
border-radius: 50%;
}
#keyframes circle {
0% {
transform: scale(0.5);
}
50% {
transform: scale(1.2);
}
80% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
I try to animate two blocks with css animation. Its have the same transform animation but one of it has background-color animation also. This animations splitted to two #keyframes.
See code (https://codepen.io/mctep/pen/Rgyaep):
<style>
.a {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
animation: a 1s infinite;
}
.b {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: gray;
animation: b 1s infinite;
}
#keyframes a {
0% {
background-color: red;
transform: translateX(0);
}
50% {
background-color: green;
transform: translateX(100px);
}
100% {
background: red;
}
}
#keyframes b {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
}
</style>
<div class="a"></div>
<div class="b"></div>
Animation of colored block is lag from gray block In Google Chrome. In Safary and FF it works perfectly.
I can to make one #keyframes for background and other for transform and it solves problem. But I want to use single value of animation property for single element. If there are no any ways to fix it I'll separate moving and coloring animations.
Why this happens? Is it Google Chrome bug?
Couldn't give you a concrete reason why this happens, but we can un-confuse Chrome by simply specifying a background-color in animation B as well.
#keyframes b {
0% {
background-color: gray; /* add this */
transform: translateX(0);
}
}
.a {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
animation: a 1s infinite;
}
.b {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: gray;
animation: b 1s infinite;
}
#keyframes a {
0% {
background-color: red;
transform: translateX(0);
}
50% {
background-color: green;
transform: translateX(100px);
}
100% {
background: red;
}
}
#keyframes b {
0% {
background-color: gray;
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
}
<div class="a"></div>
<div class="b"></div>
I want to do this: -webkit-transform: translateX(300px) but from the right instead of having the origin on left.
I tried -webkit-transform-origin: 100% 100% and even top right and it didn't affect it.
Is there a way to do it?
By the power of CSS:
body {
padding: 0;
margin: 0;
}
#page {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
z-index:2;
right:0;
}
#left_drawer {
background-color: #222222;
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
z-index: 1;
}
#toggle {
width: 50px;
height: 50px;
background-color: red;
float: right;
}
.open_drawer {
-webkit-animation: open_drawer 300ms ease-in-out;
-webkit-animation-fill-mode: forwards;
-webkit-transform: translateX(0);
}
#-webkit-keyframes open_drawer {
to {
-webkit-transform: translateX(-300px);
}
}
This will make it slide in from the right. Fiddle.