So I'm looking to create a really basic snow effect.
I have a keyframe animation for the flake swaying side to side and moving down the Y axis. I want the element to retain the ending values using forwards. But I also want to then loop the animation (infinite), so that it continues where it left off.
HTML:
<div>
<figure class="small"></figure>
</div>
CSS:
div {
width: 100%;
height: 250px;
background: #184254;
}
figure {
border-radius: 50%;
}
#-webkit-keyframes snowfall {
25% {
transform: translateX(10px) translateY(20px);
}
75% {
transform: translateX(-10px) translateY(30px);
}
100% {
transform: translateX(0px) translateY(40px);
}
}
.small {
margin-left: 100px;
width: 7px;
height: 7px;
background: #DFE9ED;
-webkit-animation: snowfall 2s ease-in-out forwards infinite;
}
http://codepen.io/mildrenben/pen/PwZdXB
You can use two animations, one to move right-left and other to make it fall.
The up to down animation will work with absolute positioning, so it will depend on body height (or its first parent with absolute or relative positioning).
figure {
border-radius: 50%;
position: absolute;
}
#-webkit-keyframes snowside {
25% {
transform: translateX(10px);
}
75% {
transform: translateX(-10px);
}
100% {
transform: translateX(0px);
}
}
#-webkit-keyframes snowfall {
0% {
top: 0;
}
100% {
top: 100%;
}
}
.small {
margin-left: 100px;
width: 7px;
height: 7px;
background: #DFE9ED;
-webkit-animation: snowside 2s ease-in-out forwards infinite, snowfall 15s ease-in-out forwards infinite;
}
http://codepen.io/anon/pen/YPwOMY
Related
I have made an animation in which the image floats.
But the image seems to be vibrating when reaching the end.
Here is the website where the image is link
This is the CSS if the div wrapping the img
.newImg {
position: relative;
width: 472px;
height: 414px;
animation-name: updown;
animation-duration: 5s;
/* animation-delay: 1.5s; */
animation-iteration-count: infinite;
transition-timing-function: ease-in-out;
}
#keyframes updown {
0% {
top: 0px;
}
25% {
top: 8px;
}
50% {
top: 0px;
}
75% {
top: 8px;
}
100% {
top: 0px;
;
}
}
The vibration you see because of the top property. Try using translateY() instead. It will perform faster, animate smoother, and won't affect the layout.
#keyframes updown {
0% {
transform: translateY(0);
}
25% {
transform: translateY(8px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(8px);
}
100% {
transform: translateY(0);
}
}
So I'm making a tic tac toe game right now and I'm trying to add in an animation for a line that shows who won. When the player wins by getting 3 horizontal things then the animation works perfectly but when they win vertically then there's a slight shake on it. Is there any way I can remove this?
Here is the CSS for the line:
#keyframes grow-left {
0% {
width: 0;
}
100% {
width: 1;
}
}
.winLine {
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
}
To view the website and see what I'm talking about it's live on GitHub at this link https://bartycoding.github.io/Tic-tac-toe/
Try creating another div that increases the height instead of using the transform: rotate(90deg);
You could try with transform: scale():
#keyframes grow-left {
0% {
transform: scale(0,1);
}
100% {
transform: scale(1,1);
}
}
I actually fixed this by having the rotation as a global css variable and then changing that variable from javascript so the css looks like this:
#keyframes grow-left {
0% {
transform: rotate(var(--winLineRotation)) scaleX(0);
}
100% {
transform: rotate(var(--winLineRotation)) scaleX(100%);
}
}
.winLine {
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
transform: rotate(var(--winLineRotation));
}
To prevent that little shake at the end of animations, you need to use : backface-visibility:hidden; to the class of the element that you've defined animation for.
#keyframes grow-left {
0% {
width: 0;
}
100% {
width: 1;
}
}
.winLine {
/* Try this */
backface-visibility: hidden;
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
}
I'm trying to make a very simple animation move with CSS only.
What i'm trying to make is
Object moves back and forth between 200px and 800px, and as the object reaches the edges, it will rotate its direction.
.cow {
width: 300px;
position: absolute;
top: 50px;
left: 0px;
animation: cowmove 5s linear both infinite alternate,
rotate 0.3s linear 5s;
}
#keyframes cowmove{
from{transform: translateX(200px);}
to{transform: translateX(800px);}
}
#keyframes rotate{
from{transform: rotateY(0);}
to{transform: rotateY(180deg);}
}
This is what i've coded so far, but the rotate is hard for me.
with current code, the object will move from 200px to 800px, teleports to 200px point and rotate, teleports back to 800px point and move back to 200px.
It may be very simple solution, but i'm having a headache figuring this out :(
Thanks,
Instead of creating two #keyframes, you can do both transform in one like this:
<div class="translate"></div>
<style>
.translate{
height: 100px;
width: 100px;
background: #151f28;
transition: 0.5s;
animation: cowmove 4s infinite;
}
#keyframes cowmove{
0% {
transform: translateX(100px) rotateY(0deg);
}
49% {
transform: translateX(500px) rotateY(0deg);
}
50% {
transform: translateX(500px) rotateY(360deg);
}
100% {
transform: translateX(100px) rotateY(360deg);
}
}
</style>
Make it only one animation since you deal with the same property:
.cow {
width: 80px;
height: 80px;
background: linear-gradient(blue 50%, red 0);
border-radius: 50%;
position: absolute;
top: 50px;
left: 0px;
animation: cowmove 5s linear infinite;
}
#keyframes cowmove {
0% {
transform: translateX(100px) rotate(0);
}
30% {
transform: translateX(400px) rotate(0);
}
50% {
transform: translateX(400px) rotate(180deg);
}
80% {
transform: translateX(100px) rotate(180deg);
}
100% {
transform: translateX(100px) rotate(360deg);
}
}
<div class="cow"></div>
I created 2 shapes and have made them spin using CSS animations. Is there any way to specify how long each shape should spin for?
I want the first shape to spin for 5s and then stop, but I want the second shape to keep on spinning.
My code:
#square1 {
position: absolute;
width: 30px;
height: 30px;
background-color: yellow;
margin-left: 240px;
margin-top: 135px;
animation: spin 1s linear infinite;
animation-name: square1;
}
#keyframes square1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
What you want is to change the iteration count on your animation.
You are setting a 360 deg in 1 second. Thats one loop of your animation. Now we add an iteration count to the second square so it repeat 5 times for 5 seconds.
.square {
/*position: absolute;*/
width: 30px;
height: 30px;
background-color: yellow;
margin-left: 240px;
margin-top: 135px;
animation: spin 1s linear;
animation-name: square1;
}
.square2 {
animation-iteration-count: 5;
}
#keyframes square1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="square square1"></div>
<div class="square square2"></div>
I have div which I'm continuously rotating using transform rotate (which is working). I then want to be able to scale the div when I hover over the rotating div. I can't get this to work, it does scale when I remove the rotation but I want it to rotate and then scale on hover.
Here is a demo pen i have created: (I'm using sass)
http://codepen.io/HJBdev/pen/BWVMjZ
<div class="spin">
</div>
.spin {
height: 50px;
width: 50px;
background-color: red;
-webkit-animation: rotation 7s infinite linear;
&:hover {
transform: scale(1.3);
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
Wrap it in a container div to Re-scale on hover, then make the .spin div 100%
Like so:
HTML:
.cont {
height: 50px;
width: 50px;
}
.cont:hover {
height: 75px;
width: 75px;
transition: .5s;
}
.spin {
height: 100%;
width: 100%;
background-color: red;
-webkit-animation: rotation 7s infinite linear;
&:hover {
transform: scale(1.3);
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
<div class="cont">
<div class="spin">
</div>
</div>
You can create a new animation for the hover that includes the scale.
Like this:
#-webkit-keyframes rotationScale {
from {
-webkit-transform: rotate(0deg) scale(1.3);
}
to {
-webkit-transform: rotate(359deg) scale(1.3);
}
}
Then just use it instead on hover:
.spin {
height: 50px;
width: 50px;
background-color: red;
-webkit-animation: rotation 7s infinite linear;
&:hover {
-webkit-animation: rotationScale 7s infinite linear;
}
}
Without adding any more HTML elements or a wrapper for them, you can use this CSS. And it maybe worth noting that the transition effect makes it more visually appealing to the user because it changes over a chosen duration rather than trying to change in an instant.
.spin {
height: 50px;
width: 50px;
background-color: red;
-webkit-animation: rotation 7s infinite linear;
transition:height 1.5s, width 1.5s;
&:hover {
height:8em;
width:8em;
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}