I am trying to get one div to rotate around another using CSS3 but for some reason it will not animate at all. I am using Chrome. Can anyone help?
here is the css
.container {
margin: 0 auto;
position: relative;
}
#center {
width: 300px;
height: 300px;
margin: 225px auto 0;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
}
#-webkit-keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#small {
position: absolute;
width: 75px;
height: 75px;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
animation: rot 3s infinite linear;
-webkit-animation: rot 3s linear infinite;
}
and here is the html
<div class="container">
<div id="center"></div>
<div id="small"></div>
</div>
You need to use -webkit prefix proprietary property to ensure that your animation runs in Webkit browsers
You Need To Use Prefix For Webkit Browsers
Demo
.container {
margin: 0 auto;
position: relative;
}
#center {
width: 300px;
height: 300px;
margin: 225px auto 0;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
}
#keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
-webkit-transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#-webkit-keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
-webkit-transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#small {
position: absolute;
width: 75px;
height: 75px;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
animation: rot 3s infinite linear;
-webkit-animation: rot 3s linear infinite;
transform-origin: 50% 200px;
-webkit-transform-origin: 50% 200px;
}
Side Note: You should use proprietary properties of each browser i.e
-moz, -webkit, -o and -ms so that older versions of the
browser don't fail to animate
Related
I have a span element and can not use another. Through this span element I have to achieve spinner/loader functionality and I want behavior looks like given below-
https://codepen.io/supah/pen/BjYLdW
Following is my code which is not working as expected:
<span class="spinner"></span>
.spinner{
display: block;
border-radius: 8em;
width: 8em;
height: 8em;
display: inline-block;
animation: dash 2.0s ease-in-out infinite;
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Can any one help me where I am lacking?
Not sure what you were doing with spinner--wholePageWithVeil. But, it's not necessary. The bit you were missing was giving the border a width and style.
body {
background-color: #008;
}
.spinner {
animation: spin 1s infinite ease-in-out;
// animation: dash 2s infinite ease-in-out;
border-radius: 50%;
border-top: 2px solid #fff;
display: inline-block;
height: 2em;
margin: calc(50vh - 1em) calc(50vw - 1em);
width: 2em;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<span class="spinner"></span>
This is to Easy.
You need to modified some css, give stroke: #fff; into spinner class.
Please check and let me know further clarificaion.
Hope this help.
html, body {
height: 100%;
background-image: linear-gradient(-105deg, #009acc, #363795);
}
.spinner {
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
stroke: #fff;
}
.path {
stroke: hsl(210, 70, 75);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
<svg class="spinner" viewBox="0 0 50 50">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>
Yes you can also create with pure css like that.
Hope this help.
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #000 transparent transparent transparent;
}
.lds-ring span:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring span:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring span:nth-child(3) {
animation-delay: -0.15s;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="lds-ring">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Yes, you need to change animation css like: animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
Hope this help.
span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
border-color: #000 #000 #000 transparent;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<span></span>
The CSS animation commands are working perfectly but you can not see it. you need an image because you are not using <svg> and <circle> as they use in the example you have attached.
Note that the width and height of .spinner class should be the width and height of the spinner image.
Based on your code:
LIVE DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--remove comment to use jquery-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<style>
.spinner {
vertical-align: middle;
width: 128px;
height: 128px;
display: inline-block;
margin-right: 5px;
border-radius: 2em;
-webkit-box-sizing: border-box;
border-top-color: #fff;
-webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
.spinner--wholePageWithVeil{
display: block;
border-radius: 8em;
width: 8em;
height: 8em;
display: inline-block;
animation: dash 2.0s ease-in-out infinite;
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<span class="spinner" [class.spinner--wholePageWithVeil]="wholePageWithVeil">
<img src="http://www.pbrennan.net/wp-content/uploads/2014/03/ic_progress.png" alt="">
</span>
</body>
</html>
Im trying to make a snake loader spinner with css using keyframes animation but i don't know it doesn't work
someone can help?
here the fiddle:
https://jsfiddle.net/fs6kafsn/
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation: rotate 0.8s infinitelinear!important;
-webkit-animation: rotate 0.8s infinitelinear!important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
thanks in advance
You need to add prefixing to your keyframes as well.
fiddle demo
#-webkit-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
This would need to be prefixed with -moz- as well for firefox compatibility.
Note
the unprefixed version should always be placed after the prefixed versions.
Full Demo
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
-webkit-animation: rotate 0.8s infinite linear !important;
-moz-animation: rotate 0.8s infinite linear !important;
animation: rotate 0.8s infinite linear !important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
#-webkit-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-moz-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="spinner">
</div>
For webkit based browser like chrome you need #-webkit-keyframes and for Mozilla firefox you need #-moz-keyframes
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-moz-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation: spin 0.8s infinite linear!important;
-webkit-animation: spin 0.8s infinite linear!important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
<div class="spinner">
</div>
I changed your fiddle. Here is the working animation: fiddle:
Code:
#-moz-keyframes myanimation /* Firefox */
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#-webkit-keyframes myanimation /* Safari and Chrome */
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation:myfirst 5s;
-moz-animation:myanimation 0.8s infinite linear; /* Firefox */
-webkit-animation:myanimation 0.8s infinite linear; /* Safari and Chrome */
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
I've got some boxes (think oblong chocolate boxes) that I want to unfold and show the contents of. The content will be another div with text, video etc., but I'm currently concerned with the unfolding animation itself.
I've got it sort of working, but the top two divs leave a gap between them while animating. Is there some way I can link them together while 'unfolding' them?
Demo: JSFiddle
HTML:
<section>
<div class="block3d">
<div class="front">
<h4>CHOCOLATE</h4>
</div>
<div class="top"><h4></h4></div>
<div class="back">
<ul>
<li>Chocolate</li>
<li>Milk</li>
<li>Nuts</li>
<li>Oranges</li>
</ul>
<a class="infolink" href="#">Open me</a>
</div>
<div class="bottom"><h4></h4></div>
</div>
</section>
Javascript:
$(document).ready(function(){
$(".block3d .infolink").click(function(e){
openBlock(this, e);
});
});
function openBlock(element, event)
{
event.preventDefault();
$(element).closest('section').addClass('open');
$.scrollTo($(element).closest('section'), {duration: 1000});
}
CSS:
section
{
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 100px;
-ms-perspective: 800px;
-ms-perspective-origin: 50% 100px;
perspective: 800px;
perspective-origin: 50% 100px;
width: 960px;
height: 240px;
margin: 10px auto;
transition-property: height;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 100ms;
}
section.open
{
height: 960px;
}
.block3d
{
position: relative;
width: 960px;
height: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: 0 auto;
-webkit-transform-origin: 0 100px;
-moz-transform-origin: 0 100px;
-ms-transform-origin: 0 100px;
transform-origin: 0 100px;
transition-property: transform, display;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 100ms;
}
.block3d:hover, .open .block3d
{
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
/* Positioning of the different faces of the block */
.block3d div
{
position: absolute;
width: 960px;
height: 200px;
background-color: rgba(0,0,0,0.4);
color: #FFFFFF;
}
.block3d .back
{
-webkit-transform: translateZ(-100px) rotateX(180deg);
-moz-transform: translateZ(-100px) rotateX(180deg);
-ms-transform: translateZ(-100px) rotateX(180deg);
transform: translateZ(-100px) rotateX(180deg);
background-color: #323232;
}
.block3d .top
{
-webkit-transform: rotateX(-270deg) translateY(-100px);
-webkit-transform-origin: top center;
-moz-transform: rotateX(-270deg) translateY(-100px);
-moz-transform-origin: top center;
-ms-transform: rotateX(-270deg) translateY(-100px);
-ms-transform-origin: top center;
transform: rotateX(-270deg) translateY(-100px);
transform-origin: top center;
}
.block3d .bottom
{
-webkit-transform: rotateX(-90deg) translateZ(100px);
-moz-transform: rotateX(-90deg) translateZ(100px);
-ms-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
.block3d .front
{
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
transform: translateZ(100px);
}
/* Div content styling */
.block3d h4, .block3d ul
{
margin-left: 480px;
background-color: #323232;
margin-top: 0;
}
.block3d h4
{
font-size: 20px;
text-align: center;
padding-top: 90px;
height: 110px;
width: 300px;
}
.block3d ul
{
padding: 40px;
height: auto;
width: 220px;
}
.block3d .infolink
{
display: block;
margin-left: 455px;
height: 30px;
width: 100px;
color: #ffffff;
text-align: center;
padding: 2px;
border: 1px dashed #FFFFFF;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
border-bottom: 0;
}
/* Open animations for the different parts */
.open .block3d .top
{
-webkit-transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
-moz-transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
transition-property: transform;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 0s;
}
#-webkit-keyframes openback
{
0% {-webkit-transform: translateZ(-100px) rotateX(180deg) translateY(0)}
50% {-webkit-transform: rotateX(270deg) translateZ(300px)}
100% {-webkit-transform: rotateX(360deg) translateY(400px) translateZ(100px)}
}
#-moz-keyframes openback
{
0% {-moz-transform: translateZ(-100px) rotateX(180deg) translateY(0)}
50% {-moz-transform: rotateX(270deg) translateZ(300px)}
100% {-moz-transform: rotateX(360deg) translateY(400px) translateZ(100px)}
}
#keyframes openback
{
0% {transform: translateZ(-100px) rotateX(180deg) translateY(0)}
50% {transform: rotateX(270deg) translateZ(300px)}
100% {transform: rotateX(360deg) translateY(400px) translateZ(100px)}
}
.open .block3d .back
{
-webkit-animation: openback 1s 1 linear forwards;
-moz-animation: openback 1s 1 linear forwards;
animation: openback 1s 1 linear forwards;
}
.open .block3d .bottom
{
-webkit-transform: rotateX(-360deg) translateZ(100px) translateY(200px);
-moz-transform: rotateX(-360deg) translateZ(100px) translateY(200px);
transform: rotateX(-360deg) translateZ(100px) translateY(200px);
transition-property: transform;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 0.0s;
}
/* Move the block into place */
.open .block3d
{
-webkit-transform: translateZ(100px) rotateX(180deg) translateY(-440px);
-moz-transform: translateZ(100px) rotateX(180deg) translateY(-440px);
transform: translateZ(100px) rotateX(180deg) translateY(-440px);
transition-property: transform;
transition-timing-function: linear;
transition-duration: 1s;
transition-delay: 0s;
}
If you are looking for cool paper fold/unfolding animations take a look at this tutorial and here is the code on git. I'd look specifically the pfold.jquery.js file in order to achieve this sort of animation.
Although it might take a little tweaking of the js/css to get it to look how you want since this is for unfolding paper instead of unwrapping a box, but the basic animation is there.
You can add a 1px pseudo element to the top and bottom of the intersecting elements. You may want to add this during the animation and then remove it after so you don't see extra space when it has stopped.
Here is a JSFiddle
Relevant CSS
.back {
position: absolute;
top: -1px;
margin-top: 1px;
margin-bottom: 1px;
}
.block3d h4
{
display: block;
position: absolute;
top: -1px;
font-size: 20px;
text-align: center;
padding-top: 90px;
height: 110px;
width: 300px;
margin-top: 1px;
margin-bottom: 1px;
}
.block3d h4:before,
.block3d h4:after,
.back:before,
.back:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #323232;
}
.block3d h4:before,
.back:before {
top: -1px;
}
.block3d h4:after,
.back:after {
bottom: -1px;
}
This question already has answers here:
CSS3 Translate across an Arc
(3 answers)
Closed 7 years ago.
Is it possible with current CSS3 to animate an object (DIV) along an this arc?
I've forked the (very good) #ArunBertil "fulcrum" solution to convert it to CSS3 Animation:
Running Demo
CSS
#keyframes drawArc1 {
0% { transform: rotate(180deg); }
100% { transform: rotate(0deg); }
}
#keyframes drawArc2 {
0% { transform: rotate(-180deg); }
100% { transform: rotate(0deg); }
}
body{
padding: 150px;
background: black;
}
.wrapper {
width: 300px;
animation: drawArc1 3s linear infinite;
}
.inner {
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc2 3s linear infinite;
}
HTML
<div class="wrapper">
<div class="inner"></div>
</div>
Watch it on FireFox... to run it on other browsers, simply put the prefixes (#-webkit-keyframes, etc)
Check this
http://dabblet.com/gist/1615901
.wrapper {
width: 500px;
margin: 300px 0 0;
transition: all 1s;
transform-origin: 50% 50%;
}
.inner {
display: inline-block;
padding: 1em;
transition: transform 1s;
background: lime;
}
html:hover .wrapper {
transform: rotate(180deg);
}
html:hover .inner {
transform: rotate(-180deg);
}
Well, working on the work of Andrea based on the work of Arun ...
simplified to make use of only 1 div, and 1 animation:
#keyframes drawArc {
0% { transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
#-webkit-keyframes drawArc {
0% { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ -webkit-transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
body{
padding: 150px;
background: black;
}
.test {
width: 30px;
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc 3s linear infinite;
-webkit-animation: drawArc 3s linear infinite;
}
demo
Added also text in the div to show that it doesn't rotate
I am trying to use this loader in my web site, scc animation works well in Firefox & IE but doesn't work in Google Chrome.
#loader{
width: 820px;
height: 670px;
border: none;
overflow: hidden;
margin: 0px 70px;
background: #0d8aa5;
position: relative;
}
#innerloader{
position: absolute;
left: 50%;
top: 50%;
margin: -60px 0 0 -60px;
background: #fff;
width: 100px;
height: 100px;
border-radius: 100%;
border: 10px solid #19bee1;
}
#innerloader:after {
content: '';
background: trasparent;
width: 140%;
height: 140%;
position: absolute;
border-radius: 100%;
top: -20%;
left: -20%;
opacity: 0.7;
box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
-webkit-animation: rotate 2s infinite linear;
-moz-animation: rotate 2s infinite linear;
-ms-animation: rotate 2s infinite linear;
-o-animation: rotate 2s infinite linear;
animation: rotate 2s infinite linear;
}
#keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
HTML
<div id="loader"><div id="innerloader"></div></div>
P.S. Here it's working correctly also in google chrome....
You need to include the prefixed keyframe rule for WebKit browsers as well.
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
}
}