I'm trying to animate scale a div element. But the animation starts from the center and spreads. Is it there a way animation to start from right and spread to left?
.graybox {
float: right;
background-color: gray;
height: 100px;
width: 400px;
line-height: 100px;
-webkit-animation: main 250ms;
-moz-animation: main 250ms;
-ms-animation: main 250ms;
animation: main 250ms;
}
#-moz-keyframes main {
0% {
-moz-transform: scaleX(0);
}
100% {
-moz-transform: scaleX(1);
}
}
By default the transform-origin is 50% 50%, you can reset that to 100% 50%, the first value 100% is x-offset, and the second value 50% is y-offset.
To make the div to scale for both width and height, simply change scaleX to scale.
You also need to set the correct #keyframes syntax, -moz prefix will only work on Mozilla browsers like Firefox. I suggest to use autoprefixer for adding popular prefixes.
.graybox {
float: right;
background-color: gray;
width: 100%;
height: 100px;
line-height: 100px;
animation: main 3s;
transform-origin: 100% 50%;
}
#keyframes main {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
<div class="graybox"></div>
Use transform-origin
.graybox {
float: right;
background-color: gray;
height: 100px;
width: 400px;
line-height: 100px;
transform-origin: 100% 50%;
animation: main .5s;
}
#keyframes main {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<div class="graybox"></div>
Related
In a moving box,
I want to make an animation that turns upside down when I raise the mouse.
I want to implement the movement of the box with the keyframe and designate hover, but it doesn't work.
What should I do?
#www{
background-color: black;
position: absolute;
left: 0;
top: 0;
animation: www 5s infinite;
transition: 1s;
}
#www:hover{
transform: rotate(180deg);
}
#keyframes www{
0% {
transform: translateX(0vw);
}
50% {
transform: translateX(50vw);
}
100% {transform: translateX(0vw);}
}
<div class="box" id="www">WWW</div>
You can use a container to have both transformation properties as you can't achieve different transform on same element using different triggers(hover automatic)
Below styles used are for illustration only (to easily understand) you can use according to need and have a transparent background if want
function func() {
document.getElementById("www").style.transform = "rotate(180deg)"
}
#www {
background-color: black;
transition: 1s transform;
animation: www 10s infinite;
width: fit-content;
}
#keyframes www {
0% {
transform: translateX(0vw);
}
50% {
transform: translateX(50vw);
}
100% {
transform: translateX(0vw);
}
}
.box1 {
transition: 1s;
background-color: red;
margin-top: 100px;
width: fit-content;
}
.box1:hover {
transform: rotate(180deg)
}
<div class="box" id="www" onclick="func()">
<div class="box1">WWW</div>
</div>
Problem
I've made a simple css animation, but it's not behaving as I expect it.
The idea is for the animation to draw a straight line (from top downwards) , and the disappear (also from the top downwards).
The start of the line moves down a bit, as the animation starts, then up again to stay at set position (same goes for the bottom at the end of the animation).
Question
How do I get the start of the line to stay at one position instead of 'bouncing' down and up?
Expected behavior
Actual behavior
Code
.lineWrapper {
width: 1px;
height: 300px;
margin: auto;
position: relative;
}
.lineWrapper .line {
width: 100%;
height: 100%;
background: #000;
animation: scrollLine 5s linear infinite;
}
#keyframes scrollLine {
0% {
transform: scaleY(0);
}
10% {
transform: scaleY(0);
transform-origin: top;
}
30% {
transform: scaleY(1);
}
70% {
transform: scaleY(1);
}
90% {
transform: scaleY(0);
transform-origin: bottom;
}
100% {
transform: scaleY(0);
}
}
<div class="lineWrapper">
<div class="line"></div>
</div>
Codepen
https://codepen.io/strazan/pen/RwPYgjq
The default transform-origin is center so if you omit it in the initial and last state it will be set to center. You need to also have an instant change of the transform-origin in the middle:
.lineWrapper {
width: 1px;
height: 300px;
margin: auto;
position: relative;
}
.line {
height: 100%;
background: #000;
animation: scrollLine 5s infinite;
}
#keyframes scrollLine {
0%,10% {
transform: scaleY(0);
transform-origin: top;
}
49.9% {
transform: scaleY(1);
transform-origin: top;
}
50% {
transform: scaleY(1);
transform-origin: bottom;
}
90%,100% {
transform: scaleY(0);
transform-origin: bottom;
}
}
<div class="lineWrapper">
<div class="line"></div>
</div>
I have made similar CSS animation with some different code lines.
body {
margin: 0px;
display: flex;
justify-content: center;
background: black;
overflow: hidden;
}
.line-wrapper {
height: 800px;
width: 8px;
background: tranparent;
display: flex;
justify-content: center;
animation: down 2s linear infinite;
}
#keyframes down {
0% {
transform: translateY(0px);
}
15% {
transform: translateY(0px);
}
30% {
transform: translateY(0px);
}
60% {
transform: translateY(90px);
}
90% {
transform: translateY(115px);
}
100% {
transform: translateY(115px);
}
}
.line {
height: 8px;
width: 4px;
background: Gray;
animation: scrollLine 2s ease-in-out infinite;
}
#keyframes scrollLine {
100% {
height: 800px;
}
}
.eraser {
height: 0px;
width: 4px;
background: black;
animation: rmv 2s linear infinite;
}
#keyframes rmv {
55% {
height: 0px;
}
100% {
height: 800px;
}
}
<div class="line-wrapper">
<div class="line">
<div class="eraser"></div>
</div>
</div>
When I load the page the box will have infinite keyframes of animation jumpin. Now I want the box to increase its scale when I hover it, but I cant seem to work it out. When I add the "hover" code it will only work once. I added "infinite" but still it wont work. but when I removed the keyframe the scale will work just fine the way I want it to be, but I want to combine keyframe and scale together.
https://jsfiddle.net/vucocsym/1/
#tag1 {
position: absolute;
right: 50%;
bottom: 50%;
border-style: none;
background-color: #ff4d4d;
border-radius: 10px;
padding: 20px;
color: #f2f2f2;
animation: jumping 1s 1s ease infinite;
transition: 2s;
}
#tag1:hover {
transform: scale(1.3);
}
#keyframes jumping {
0% {
transform: translateY(0px)
}
50% {
transform: translateY(5px)
}
100% {
transform: translateY(0px)
}
}
<div id="tag1">
<h4>Hello there!</h4>
</div>
The property transform allows multiple functions set together, e.g.
transform: translateY(5px) scale(1.3);
However, if you want to trigger scale(1.3) only on :hover, then you need to set it on a different element, that can be either an inner or a wrapper element.
In the following example, there are three elements for center, scale and bounce.
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.scale {
transition: 1s;
}
.scale:hover {
transform: scale(1.3);
}
.bounce {
background-color: crimson;
color: white;
border-radius: 10px;
padding: 20px;
animation: jumping 1s 1s ease infinite;
}
#keyframes jumping {
0% {
transform: translateY(0);
}
50% {
transform: translateY(5px);
}
100% {
transform: translateY(0);
}
}
<div class="center">
<div class="scale">
<div class="bounce">Hello there, hover me!</div>
</div>
</div>
I have a jfiddle here in which I am rotating an image in an elliptical form. However, I do not want the image to rotate at the same time.
To correct this, I set the rotational -webkit-keyframes mO with the following properties:
0% { -webkit-transform: rotate(0deg); rotate(0deg); }
100% { -webkit-transform: rotate(360deg); rotate(-360deg); }
Because in past attempts to get an elliptical rotation, setting the opposite rotational property stopped the circle from rotating. In this case, it is not working. Is there another way that I can get the image to not rotate throughout the path? This is my first project designing something for the web.
.deform {
width: 200px;
height: 200px;
-webkit-transform: scaleX(3);
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
border-radius: 50%;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
-webkit-transform-origin: 50% 50%;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 50px;
height: 50px;
position: absolute;
left: 0px;
top: 0px;
background-color: red;
display: block;
-webkit-transform: scaleX(0.33);
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
Check here.
I'm trying to center something horizontally and vertically using flexbox as described Here ( click "Both Horizontally and Vertically" => then click "Can you use flexbox?")
.parent_test {
display: flex;
justify-content: center;
align-items: center;
}
.sk-double-bounce {
width: 40px;
height: 40px;
position: relative;
}
.sk-double-bounce .sk-child {
width: 100%;
height: 100%;
border-radius: 20%;
background-color: green;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
animation: sk-doubleBounce 2s infinite ease-in-out; }
.sk-double-bounce .sk-double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s; }
#-webkit-keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1);
transform: scale(1); } }
#keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1);
transform: scale(1); } }
<h1>centering-css-complete-guide/#both-flexbox
<div class="parent_test">
<div class="sk-double-bounce">
<div class="sk-child sk-double-bounce1"></div>
<div class="sk-child sk-double-bounce2"></div>
</div>
</div>
But why isn't it centering vertically? JSBin
you need to specify a height for parent, in order to make it vertically aligned.
body {
margin: 0
}
.parent_test {
display: flex;
justify-content: center;
align-items: center;
height: 100vh
}
.sk-double-bounce {
width: 40px;
height: 40px;
position: relative;
}
.sk-double-bounce .sk-child {
width: 100%;
height: 100%;
border-radius: 20%;
background-color: green;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
animation: sk-doubleBounce 2s infinite ease-in-out;
}
.sk-double-bounce .sk-double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
<div class="parent_test">
<div class="sk-double-bounce">
<div class="sk-child sk-double-bounce1"></div>
<div class="sk-child sk-double-bounce2"></div>
</div>
</div>
If you inspect the output, you'll see .sk-double-bounce is actually centered within .parent_test. The problem is that .parent_test has way lesser height. ( It only takes the amount of height required by it's content plus padding and border values).
You can now understand why the solution by #dippas works. If you want, you could remove the .parent_test wrapper, put flex rules in body, set body's height to 100vh and then put .sk-double-bounce div directly inside body. That would do the same job.