This question already has answers here:
left and top properties are not animated
(2 answers)
Closed 6 years ago.
Where on earth have I gone wrong with this css animation?
#keyframes home {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
#circle {
animation: home 2s linear infinite;
}
<section id="circle"></section>
Fiddle link
Add position:relative; to your CSS in order to control the top, right, bottom, left properties
#circle {
position:relative;
width: 75px;
height: 75px;
background: blue;
-moz-border-radius: 50%;
-webkit-border-radius:50%;
border-radius: 50%;
animation: home 5s linear infinite;
}
#keyframes home {
0% {left:0px;}
50% {left:400px;}
100% {left:0px;}
}
<div id="circle"></div>
Related
https://codepen.io/jenny0515/pen/JjOmVeL
Please check my code in the link above!
How can I make them rotate closer together and stay within the rectangle while going in circular motion in CSS?
That doesn't mean I want the scroll option in the main div/rectangle; I just want to be able to see the cubes rotate in circular motion closer to each other.
So, they should circle near the circle in the center of the rectangle.
Here's a small preview of my CSS code found in the link:
.aqua-6s{
-webkit-animation: aqua linear infinite 6s;
-moz-animation: aqua linear infinite 6s;
-o-animation: aqua linear infinite 6s;
-ms-animation: aqua linear infinite 6s;
animation: aqua linear infinite 6s;
-webkit-transform-origin: 50% 50%;
}
Is there anything missing in the animations that will help me accomplish getting the cubes rotating near the circle and within the div?
But please check the link, since everything's there; it would mean a lot!
There are multiple ways to achieve,
Simplest is to
Set position:absolute; on circle and 3 squares and bring them all to the one point, center of their parent for example.
Move our squares 200px to the left (left: calc(50% - 200px)) and set transform-origin: 200px.
Add animation.
*{box-sizing: border-box;}
.div{
height: 500px;
width: 100%;
border: 5px solid;
overflow: hidden;//remove later;
position: relative;
}
.div .circle{
position:absolute;
width: 24px;
height: 24px;
left: calc(50% - 12px);
top: calc(50% - 12px);
border-radius: 50%;
border: 3px solid red;
}
.div .square{
position:absolute;
width: 48px;
height: 48px;
left: calc(50% - 200px);
top: calc(50% - 24px);
border: 3px solid red;
animation: rotate linear infinite 6s;
transform-origin: 200px ;
}
.div .square:nth-of-type(2){
animation-delay: 2s;
border-color: green;
}
.div .square:nth-of-type(3){
animation-delay: 4s;
border-color: blue;
}
#keyframes rotate{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class= div>
<div class="circle"></div>
<div class="square "></div>
<div class="square "></div>
<div class="square "></div>
</div>
This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 4 years ago.
Right now, the animation makes the circle move from left to right corner. But once the animation finishes, It flicks back again to the left.
How to make the circle stay on the right corner after it has reached the very right corner of the screen?
html:
<div class="circle"> </div>
css:
.circle{
height: 100px;
width: 100px;
background-color: green;
border-radius: 100px;
-webkit-animation-name: move;
-webkit-animation-duration: 20s;
animation-name: move;
animation-duration: 20s;
}
#-webkit-keyframes move {
0% {
background-color:red;
transform: translateX(0vw);
}
100% {
background-color:pink;
transform: translateX(90vw);
}
}
Add to .circle:
.circle {
....
animation-fill-mode: forwards;
....
}
(See w3schools)
This question already has answers here:
background-position-y doesn't work in Firefox (via CSS)?
(9 answers)
Closed 3 years ago.
I know this has been answered somewhere already, but can't figure out what's wrong.
I have used repeating-linear-gradient for background and #-webkit-keyframes and #keyframes for animating it. It does work in google chrome but not in firefox.
HTML
<div class="menu_block"></div>
CSS
.menu_block {
height:100px; width:500px;
background: repeating-linear-gradient(45deg,#000,#000 20px,#fff 20px,#fff 40px);
background-size:56px 56px;
background-position-x:0%;
-webkit-animation:'slide' 30s infinite linear forwards;
}
#-webkit-keyframes 'slide' {
0%{background-position-x:0%;}
100% { background-position-x:100%;}
}
#keyframes 'slide' {
0%{ background-position-x:0%; }
100% { background-position-x:100%;}
}
jsfiddle is here
https://jsfiddle.net/mathews8881/0cj3L6wu/
Could somebody please help.
Try animating both params background-position: 0% 0;. Also missing non-prefixed animation rule.
.menu_block {
height: 100px;
width: 500px;
background: repeating-linear-gradient(45deg, #000, #000 20px, #fff 20px, #fff 40px);
background-size: 56px 56px;
background-position: 0 0;
-webkit-animation: slide 30s infinite linear forwards;
animation: slide 30s infinite linear forwards;
}
#keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
#-webkit-keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
<div class="menu_block">
</div>
Remove the single quotes on the animation/keyframes property values, the -webkit- prefix on animation and use background-position: 0%; instead of background-position-x:0%; (as mentioned in a comment, background-position-x is not supported across browser).
Note, since your prefixed properties weren't consistent applied I removed all of them, so you need to add them back to cover older browser versions needing them. Also, in your case, no need to use forwards in your animation when using infinite
.menu_block {
height:100px; width:500px;
background: repeating-linear-gradient(45deg,#000,#000 20px,#fff 20px,#fff 40px);
background-size:56px 56px;
background-position:0%;
animation: slide 30s infinite linear;
}
#keyframes slide {
0%{ background-position:0%; }
100% { background-position:100%;}
}
<div class="menu_block">
</div>
I'm trying to create an animation that simulates a "cut from rope" sort of effect.
Picture an object hanging from two ropes. First, the left one is cut, and a bit after the right one is then cut. I have got pretty close to the desire effect, but my animation isn't as smooth as I would like.
You can see that the object sort of bounces back up, which I tried to minimize by translating the entire object down.
My question is, is there a better way to achieve this effect, or any ways to improve my animation?
HTML
<div id="box"></div>
<div id="bottom"></div>
CSS
#box {
width: 400px;
height: 60px;
background: black;
margin: 100px;
animation: ropecut 1.2s 1 ease-out;
transform: rotateZ(0deg);
transform: rotateZ(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
transform: translateY(50px)
}
#bottom {
width: 600px;
height: 2px;
background: red;
margin-top: -50px;
}
#keyframes ropecut {
0% {transform: rotateZ(0deg);transform-origin: top right;animation-timing-function: ease-in-out;}
50% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
70% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
100% {transform: rotateZ(0);transform-origin: top left;animation-timing-function: ease-in-out;transform: translateY(50px)}
}
Link to JS Fiddle
Try this, I basically just took out the 70% bit of the keyframe and then removed the rotateZ in the 100% sequence. That will keep the bottom left corner where it should stay.
#box {
width: 400px;
height: 60px;
background: black;
margin: 100px;
animation: ropecut 1.2s 1 ease-out;
transform: rotateZ(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
transform: translateY(50px)
}
#bottom {
width: 600px;
height: 2px;
background: red;
margin-top: -50px;
}
#keyframes ropecut {
0% {transform: rotateZ(0deg);transform-origin: top right;animation-timing-function: ease-in-out;}
50% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
100% {animation-timing-function: ease-in-out; transform-origin: top right;}
}
<div id="box"></div>
<div id="bottom"></div>
i have two css3 keyframes and trigger by some button, but the issue is when i try to adding a new keyframe (new class) the transition not change in smooth way, how to make this transition working smooth ?
source in fiddle here
.button {
width:50px;
height:50px;
background:silver;
}
.box {
width: 100px;
height: 100px;
background: green;
position: relative;
top: 10%;
left: 10%;
}
.box {
animation: xx 2s linear infinite;
}
.boxShake {
animation:boxShake 2s linear infinite;
}
One trick to achieve this is not to change the animation.
But make a composite animation transforming both the X and the Y in percentages.
Now, changing the width and the height of the element, we modify the amount of movement in one axis or the other of the unaltered animation
$(".button").click(function(){
$("#mover").toggleClass("alternate");
});
.button {
width:50px;
height:50px;
background:silver;
}
.box {
width: 100px;
height: 100px;
background: green;
position: relative;
top: 10%;
left: 10%;
}
.box {
animation: xx 2s linear infinite;
}
#mover {
width: 0px;
height: 20px;
transition: width 2s, height 2s;
animation: mover 2s linear infinite;
}
#mover.alternate {
width: 5px;
height: 0px;
}
#keyframes mover {
0% {transform:translate( 0%, 0%);}
10% {transform:translate(-100%, 20%);}
20% {transform:translate( 100%, 40%);}
30% {transform:translate(-100%, 60%);}
40% {transform:translate( 100%, 80%);}
50% {transform:translate(-100%, 100%);}
60% {transform:translate( 100%, 80%);}
70% {transform:translate(-100%, 60%);}
80% {transform:translate( 100%, 40%);}
90% {transform:translate(-100%, 20%);}
100% {transform:translate( 0%, 0%);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Button</div>
<div id="mover">
<div class="box"></div>
</div>
Just play with the width and height of the 2 element states, and the transition between them, to adapt it to your needs