I have a problem with CSS currently.
https://jsfiddle.net/k9cfdofv/1/
There you can see that the
stripe (parallelogram) comes from the bottom, but it goes a little bit to right before it goes in that state I want it.
So I want it come from the bottom and go to the top without this shift at the end.
CSS-Code:
.stripe {
width: 100px;
height: 100px;
margin-left: 100px;
background: red;
transform: skew(-10deg);
animation: ani 1s linear 1 forwards;
position: absolute;
bottom: 10px;
}
#keyframes ani {
0% {
height: 0px;
}
100% {
height: 700px;
}
}
It can be done by setting a transform-origin for element to be skewed to left bottom.
div {
width: 100px;
height: 100px;
margin-left: 100px;
background: red;
transform: skew(-10deg);
transform-origin: left bottom;
animation: ani 1s linear 10 forwards;
position: absolute;
bottom: 10px;
}
#keyframes ani {
0% {
height: 0px;
}
100% {
height: 700px;
}
}
<div>
</div>
Related
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
I want my image to start with top:0 and ends with bottom:0 with smooth animation. I am struggling to find out the solution.
To be very clear i cannot use background images for SEO purpose. JS solutions are also welcome.
.element {
height: 200px;
width: 400px;
background-color: red;
position: relative;
margin: auto;
overflow: hidden;
}
.element img {
animation: nudge 5s linear infinite alternate;
position: absolute;
top: 0;
left: 0;
}
#keyframes nudge {
0%, 100% {
top: 0;
bottom: auto;
}
50% {
bottom: 0%;
top: auto;
}
}
<div class="element">
<img src="https://www.neelnetworks.com/wp-content/uploads/2018/08/ecommerce-bg.png" alt=""></div>
Instead of trying to animate on top and bottom, you can animate on translateY and move it down with top so it doesnt go off screen
.element {
height: 200px;
width: 400px;
background-color: red;
position: relative;
margin: auto;
overflow: hidden;
}
.element img {
animation: nudge 2s linear infinite alternate;
position: absolute;
top: 0;
transform: translateY(0);
}
#keyframes nudge {
100% {
transform: translateY(-100%);
top: 100%;
}
}
<div class="element"><img src="https://www.neelnetworks.com/wp-content/uploads/2018/08/ecommerce-bg.png" alt=""></div>
I have a circle that expands using CSS keyframes, with fixed positioning. The trouble is, as the circle changes size, the centre of the circle moves (whilst the top left corner remains fixed). How do I ensure the centre is fixed during the animation? Is there a way to specify the "origin" of the div so that's it's not the top left?
<div id="circle"></div>
and
#circle {
position: fixed;
background: #07F;
border-radius: 50%;
animation: expand linear 3s infinite;
top: 10px;
left: 10px;
}
#keyframes expand {
0% {
width: 100px;
height: 100px;
}
100% {
width: 500px;
height: 500px;
}
}
See this JSFiddle
Another option, what you can do is use transform - scale property to increase dimensions and then transform-origin to keep it centered:
#circle {
position: fixed;
background: #07F;
border-radius: 50%;
animation: expand linear 3s infinite alternate;
top: 10px;
left: 10px;
transform-origin: center;
width: 100px;
height: 100px;
}
#keyframes expand {
0% {
transform: scale(1);
}
100% {
transform: scale(5);
}
}
<div id="circle"></div>
try this:
#circle {
position: fixed;
background: #07F;
border-radius: 50%;
animation: expand linear 3s infinite alternate;
top: calc(10px + 50px); /* 10px + (half of the initial height) */
left: calc(10px + 50px); /* 10px + (half of the initial width) */
transform: translate(-50%, -50%)
}
#keyframes expand {
0% {
width: 100px;
height: 100px;
}
100% {
width: 500px;
height: 500px;
}
}
<div id="circle"></div>
This code takes a ball and moves it to the right and back again. How can I get it to move to the right, and stay there?
http://codepen.io/chriscoyier/pen/pBCax
You can fiddle with a Live version of the output there.
body {
padding: 30px;
}
#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease infinite;
}
#keyframes move {
50% {
top: 200px;
left: 130px;
}
}
The css code says 'infinite' and when I delete that, it moves the ball to the right, and then back to where it was one time. I'd like it to move to the right, and just stay there.
Replace infinite with forwards and add a from and to to your #keyframes
Adjust the top, left values as necessary.
See below:
body {
padding: 30px;
}
#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease forwards;
}
#keyframes move {
from {
top: 0px;
left: 10px;
}
to {
top: 200px;
left: 130px;
}
}
<h1>Animate with Top/Left</h1>
<div id="animate"></div>
Here you go:
animation: move 3s ease forwards;
http://codepen.io/anon/pen/yebvZx
You can read about the animation-fill-mode property here:
https://drafts.csswg.org/css-animations-1/#animation-fill-mode
forwards -
After the animation ends (as determined by its animation-iteration-count), the animation will apply the property values for the time the animation ended.
Your are looking for:
animation-fill-mode: forwards;
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.