I want to resolve the question img:
How to resolve the blank space when fold between the red and purple div !
is whether because of the perspective property ?
Thanks a lot!!!
div {
width: 200px;
height: 100px;
background: #333;
}
.fold-div {
position: relative;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#div1 {
background: #d94f5c;
animation-name: fold-top;
transform-origin: top;
}
#div2 {
background: #742fad;
animation-name: fold-bottom;
transform-origin: bottom;
}
#keyframes fold-top {
100% {
transform: perspective(50px) rotateX(-8deg);
height: 0;
}
}
#keyframes fold-bottom {
100% {
transform: perspective(50px) rotateX(8deg);
height: 0;
}
}
<div></div>
<div class="fold-div" id="div1"></div>
<div class="fold-div" id="div2"></div>
<div></div>
I just added a negative margin to fix this issue. see the snippet.
div {
width: 200px;
height: 100px;
background: #333;
}
.fold-div {
position: relative;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#div1 {
background: #d94f5c;
animation-name: fold-top;
transform-origin: top;
margin-bottom: -10px; // negative margin
}
#div2 {
background: #742fad;
animation-name: fold-bottom;
transform-origin: bottom;
}
#keyframes fold-top {
100% {
transform: perspective(50px) rotateX(-8deg);
height: 0;
margin-bottom: 0; // reset margin to 0 to avoid a glitch bug
}
}
#keyframes fold-bottom {
100% {
transform: perspective(50px) rotateX(8deg);
height: 0;
}
}
<div></div>
<div class="fold-div" id="div1"></div>
<div class="fold-div" id="div2"></div>
<div></div>
inspire Jinu Kurian idea, i resolve the question by margin-bottom -10px when animation start!!! thanks Jinu Kurian a lot!!!
div {
width: 200px;
height: 100px;
background: #333;
}
.fold-div {
position: relative;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#div1 {
background: #d94f5c;
animation-name: fold-top;
transform-origin: top;
}
#div2 {
background: #742fad;
animation-name: fold-bottom;
transform-origin: bottom;
}
#keyframes fold-top {
0% {
margin-bottom: -10px; // when animate, margin-bottom -10px
}
100% {
transform: perspective(50px) rotateX(-8deg);
height: 0;
}
}
#keyframes fold-bottom {
100% {
transform: perspective(50px) rotateX(8deg);
height: 0;
}
}
thanks's Jinu Kurian, inspire by the idea, i resolve it when start animation 0% {
margin-bottom: -10px
}
<div>
</div>
<div class="fold-div" id="div1"></div>
<div class="fold-div" id="div2"></div>
<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>
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>
Im trying to create a simple loader animation that draws a line back and forth but currently is moving only in one direction. As soon as it reaches the middle of the animation it does not animate in the oposite direction.
This is my css
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
}
50% {
left: 100%;
}
100% {
left: 0%;
width: 100%
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
position: relative;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
And my html
<div class="loader">
<div class="bar"></div>
</div>
And a jsfiddle with the code
Can someone tell me what I'm doing wrong?
It is because you have a heavy break between 49% and 50%.
49% {
width: 100%;
}
50% {
left: 100%;
}
Adding the left to the 49%, and adjusting a few properties of width, left, etc. gives you an awesome pulsating effect:
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
left: 0%
}
50% {
left: 100%;
}
100% {
left: 0%;
width: 100%
}
}
Snippet
body {margin: 0; padding: 0;}
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
left: 0%
}
50% {
left: 100%;
width: 0;
}
100% {
left: 0%;
width: 100%
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
position: absolute;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
<div class="loader">
<div class="bar"></div>
</div>
Fiddle: http://jsfiddle.net/praveenscience/06w7zwwm/
If you need a pulsating effect, you need to use two extremes:
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
Snippet
body {margin: 0; padding: 0; overflow: hidden;}
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
width: 100%;
position: absolute;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
<div class="loader">
<div class="bar"></div>
</div>
I have slightly changed your code, managed to make it work. Here's what I've changed:
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
Added overflow: hidden; to .loader
Added width: 100%; to .loader .bar
http://jsfiddle.net/wbyzy9jL/5/
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>
I want the progress bar to go from 0% width to 50% width in 2 seconds. This is my code so far:
<style>
#progressbar {
background-color: #000000;
border-radius: 8px;
padding: 3px;
width: 400px;
}
#progressbar div {
background-color: #0063C6;
height: 10px;
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
</style>
<div id="progressbar">
<div></div>
</div>
but when I open the page the width is 100% instead of 50%. what have I done wrong?
Your loadbar animation was not closed. The animation should work now. I've also added a forwards keyword to only play the animation once.
#progressbar {
background-color: black;
border-radius: 8px;
padding: 3px;
width: 400px;
}
#progressbar div {
background-color: #0063C6;
height: 10px;
border-radius: 5px;
animation:loadbar 2s normal forwards ease-in-out;
-webkit-animation:loadbar 2s normal forwards ease-in-out;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Here's a Fiddle
#progressbar div {
background-color: #0063C6;
width: 50%;
height: 10px;
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
jsFiddle demo
Set the initial width to 0%
#progressbar div {
background-color: #0063C6;
height: 10px;
width:0%; /* ADD THIS <<< */
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Additionally, I added in the following..
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
If you want the animation to end in a forwards motion you need this... here is a demo demonstrating what would happen without it.. jsFiddle here