I am attempting to rotate/spin-in-place some stacked divs, but the 'transform-origin' property seems to be ignored when using absolute divs.
Attached is an example, the divs are stacked using stack class. Would using SVG be a better solution?
.circle {
height: 250px;
width: 250px;
border-radius: 50%;
border: 50px solid white;
margin: auto;
}
body {
background: black;
overflow: hidden;
}
.circle_one {
animation: rotateY 3s infinite linear;
}
.circle_two {
animation: rotateX 2s infinite linear;
}
.spinMe {
animation: spinMe 2s infinite linear;
transform-origin: 50% 50%;
}
.stack {
position: absolute;
top: 0;
left: 0;
}
#-webkit-keyframes rotateY {
to {
transform: rotateY(360deg);
}
}
#-webkit-keyframes rotateX {
to {
transform: rotateX(360deg);
}
}
#-webkit-keyframes spinMe {
to {
transform: rotate(360deg);
}
}
<div class="spinMe">
<div class="circle circle_one stack"></div>
<div class="circle circle_two stack"></div>
</div>
The problem is that the spinMe element has 100% width and zero height due to the absolutely positioned children. If you give spinMe a defined width and height equal to .circle it works correctly.
.circle {
height: 250px;
width: 250px;
border-radius: 50%;
border: 50px solid white;
margin: auto;
}
body {
background: black;
overflow: hidden;
}
.circle_one {
animation: rotateY 3s infinite linear;
}
.circle_two {
animation: rotateX 2s infinite linear;
}
.spinMe {
animation: spinMe 2s infinite linear;
transform-origin: 50% 50%;
width: 350px;
height: 350px;
}
.stack {
position: absolute;
top: 0;
left: 0;
}
#-webkit-keyframes rotateY {
to {
transform: rotateY(360deg);
}
}
#-webkit-keyframes rotateX {
to {
transform: rotateX(360deg);
}
}
#-webkit-keyframes spinMe {
to {
transform: rotate(360deg);
}
}
<div class="spinMe">
<div class="circle circle_one stack"></div>
<div class="circle circle_two stack"></div>
</div>
Related
I want to show an animation of drawing an angled and straight line and to show my text from left to right when hovering over a button and I am fairly new at this. also is there a way for my text to stay and not go away after animation finishes?
Here is my code, the code is a combination of other answers from stack overflow.
.skew {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
animation: draw 0.5s linear;
animation-fill-mode: forwards;
}
.line {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(45deg);
animation: drawLine 0.7s linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.showText {
animation: showText 2s;
position: relative;
top: -17px;
left: 15px;
opacity: 0;
}
#keyframes showText {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
#keyframes drawLine {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div>
<button class="menubtn">hover over me</button>
</div>
<div class="skew">
<div class="line">
<div class="showText">menu item</div>
</div>
</div>
You need to add/toggle a class on the div.skew element with Javascript, and define animation rules on that class or children of elements with that class, like so:
var button = document.querySelector("button.menubtn"); //Select the button
var skewElement = document.querySelector("div.skew"); //Select the 'skew' element
button.onmouseover = function(){
skewElement.classList.toggle("startAnimation");
}
.skew {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
}
.skew.startAnimation {
animation: draw 0.5s linear;
animation-fill-mode: forwards;
}
.line {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(45deg);
}
.startAnimation .line {
animation: drawLine 0.7s linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.showText {
opacity: 0;
position: relative;
top: -17px;
left: 15px;
}
.startAnimation .showText {
animation: showText 2s;
animation-fill-mode: forwards;
}
#keyframes showText {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
#keyframes drawLine {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div>
<button class="menubtn">hover over me</button>
</div>
<div class="skew">
<div class="line">
<div class="showText">menu item</div>
</div>
</div>
In order to have the text visible even after animation's end, you have to specify animation-fill-mode: forwards on .showText, like I have done in the snippet above.
To get the animation done on hovering, first we have to create an event for hovering for that particular element using javascript
Then call a function when that event is triggered , for you it will be displaying some animations
Just for simplicity , i just made a parent div for your entire animation elements , and not displaying initially
Later on hovering , we change the css display property of that parent element to block which will display all of your animated elements
Also to make sure your text stays after animation , there is an animation property called forwards which will keep your final animation state for the later time
var hvrbtn=document.getElementById("hvrbtn");
hvrbtn.onmouseover=()=>{
var anim=document.getElementById("anim");
anim.style.display="block";
};
.animated{
display:none;
}
.skew {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
animation: draw 0.5s linear;
animation-fill-mode: forwards;
}
.line {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(45deg);
animation: drawLine 0.7s linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.showText {
animation: showText 2s forwards;
position: relative;
top: -17px;
left: 15px;
opacity: 0;
}
#keyframes showText {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
#keyframes drawLine {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div>
<button class="menubtn" id="hvrbtn">hover over me</button>
</div>
<div class="animated" id="anim">
<div class="skew">
<div class="line">
<div class="showText">menu item</div>
</div>
</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>
I have a situation similar to this fiddle, where I have a CSS3 animation that scales an element absolute-positioned in the centre of another element. However, when the animation takes place it is off-centre, as seen by the red squares relative to blue in the example. How do I centre it? I have tried a couple of configurations around the transform-origin property, but this isn't producing the correct results.
#keyframes ripple_large {
0% {transform:scale(1); }
75% {transform:scale(3); opacity:0.4;}
100% {transform:scale(4); opacity:0;}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
transform-origin:center;
}
.one {
animation: ripple_large 2s linear 0s infinite;
}
.two {
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
The issue is that you are overriding the translate transformation.
When you specify a new transformation (the one inside the animation) it override the first one. In your case you are removing the translation that is fixing the center alignment.
You need to add them to the same transform property and pay attention to the order because it's important (Why does order of transforms matter? rotate/scale doesn't give the same result as scale/rotate)
#keyframes ripple_large {
0% {
transform: translate(-50%, -50%) scale(1);
}
75% {
transform: translate(-50%, -50%) scale(3);
opacity: 0.4;
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin: center;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
-webkit-animation: ripple_large 2s linear 0s infinite;
animation: ripple_large 2s linear 0s infinite;
}
.two {
-webkit-animation: ripple_large 2s linear 1s infinite;
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
UPDATE
As commented, it's better to center your element using another method than translation to avoid changing the animation since this can be used with other elements.
Example:
#keyframes ripple_large {
0% {
transform: scale(1) ;
}
75% {
transform:scale(3) ;
opacity: 0.4;
}
100% {
transform: scale(4) ;
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin:center;
}
.to-animate {
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
animation: ripple_large 2s linear 0s infinite;
}
.two {
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
I found loader CSS trick, and I want to put text or image into loader without rotation.
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
text-align: center;
line-height: 50px;
margin: 10px auto;
font-size: 12px;
}
.loader > span {
animation: no-spin .5s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes no-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
I tried #keyframes no-spin for reverse rotation, but didn't work.
You'll want to add display:block on the <span>. A transform on display:inline will not work (as specified in the spec). In practice this boils down to using display:block or display:inline-block.
I've also modified the animation time of .no-spin to 1s, to match your spin animation speed.
This will give the illusion of not spinning, in actuality it's spinning with the same speed in the opposite direction.
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
text-align: center;
line-height: 50px;
margin: 10px auto;
font-size: 12px;
}
.loader > span {
display: block;
animation: no-spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes no-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
Use the spin on a pseudo element
.loader {
position: relative;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
margin: 10px auto;
font-size: 12px;
}
.loader::after {
content: '';
position: absolute;
top: 0; left: 0;
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
animation: spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
I have this:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate;
}
#keyframes rotate {
from {transform: rotate(-30deg);}
to {transform: rotate(30deg);}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
But I want something like this:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate, translate 0.5s ease-in-out infinite alternate;
}
#keyframes rotate {
from {transform: rotate(-30deg);}
to {transform: rotate(30deg);}
}
#keyframes translate {
from {top: 10px;}
to {top: 0px;}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
EDIT: I probably didn't explain this well enough. What I meant is, is there a way to keep the bottom of the div touching the line witout using any sort of animation to move it up and down? I want it to be dynamic, so that if I change the value of the rotation, I won't have to calculate and change the value of the translation.
EDIT2: Simply put: I just want the div to do what the second example is doing without needing a specific value for the vertical movement.
You should play with values to get it perfect but this is the idea:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate;
}
#keyframes rotate {
0% {transform: rotate(-30deg); top: 10px;}
50% {top: 0px;}
100% {transform: rotate(30deg); top: 10px;}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
I'm not sure that this is what do you expect, but I will give it a try.
* {
margin: 0;
padding: 0;
}
div {
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate, stretch 1s ease-in-out infinite;
}
hr {
position: absolute;
top: 99px;
width: 99%;
}
#keyframes rotate {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(30deg);
}
}
#keyframes stretch {
0% {
height: 112px;
}
50% {
height: 100px;
}
100% {
height: 112px;
}
}
<div></div>
<hr>