Hi there I want to give this effect to my logo
but somehow I am stuck can you help me please? I want the circles to be show one in after another but only when shown the fourth circle only then the efect can end. Sorry for my english. Please help
html,
body {
color: #2E4453;
font-size: 100%;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: 400;
background-color: #D1C4E9;
}
.open-dev-radar {
position: relative;
width: 100%;
padding-top: 100%;
}
.open-dev-badge {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
/* padding: 15px; */
border-radius: 50%;
background-color: #fff;
box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.34);
}
.gt-dev {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.gt-dev:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
border-radius: 50%;
border: solid 1px rgba(103, 58, 182, 0.74);
background-image: -webkit-radial-gradient(circle farthest-corner, rgba(103, 58, 182, 0) 52%, rgba(103, 58, 182, 0.62) 100%);
background-image: radial-gradient( circle farthest-corner, rgba(103, 58, 182, 0) 52%, rgba(103, 58, 182, 0.62) 100%);
-webkit-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0;
filter: alpha(opacity=0);
}
.gt-dev:nth-child(4) {
width: 120px;
height: 120px;
}
.gt-dev:nth-child(3) {
width: 190px;
height: 190px;
}
.gt-dev:nth-child(3):after {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.gt-dev:nth-child(2) {
width: 270px;
height: 270px;
}
.gt-dev:nth-child(2):after {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.gt-dev:nth-child(1) {
width: 370px;
height: 370px;
}
.gt-dev:nth-child(1):after {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
90% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
filter: alpha(opacity=100);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 0;
filter: alpha(opacity=0);
}
}
#keyframes pulse {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
90% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
filter: alpha(opacity=50);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 0;
filter: alpha(opacity=100);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ripple Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="gt-dev"></div>
<div class="gt-dev"></div>
<div class="gt-dev"></div>
<div class="gt-dev"></div>
<div class="open-dev-badge"><img src="Loader.svg"></div>
</body>
</html>
I would use a slightly different approach.
As the circles are purely for decoration, not containing information that needs to be interpreted e.g. by a screen reader, I'd have the logo contained entirely within one element and put the background overall color on that element and the circles on its before pseudo element.
Then use a CSS animation to draw the circles with radial-gradient backgrounds one by one.
In this snippet the colors required are defined as CSS variables col1... so you can change them easily if needed. The animation works by setting the colors in the radial gradient background one by one.
.logo {
position: relative;
width: 100vmin;
height: 100vmin;
background-color: #303030;
}
.logo::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
display: inline-block;
--col1: #a5bc1f;
--col2: #99ae21;
--col3: #707d28;
--col4: #4a4f2d;
--c1: var(--col1);
--c2: var(--col2);
--c3: var(--col3);
--c4: var(--col4);
background-image: radial-gradient(var(--c1) 0 10%, var(--c2) 10% 20%, var(--c3) 20% 30%, var(--c4) 30% 40%, transparent 40% 100%);
}
.logo::before {
animation: ripple 4s linear;
}
#keyframes ripple {
0% {
--c2: transparent;
--c3: transparent;
--c4: transparent;
--c1: var(--col1);
}
33.33% {
--c2: var(--col2);
}
66.66% {
--c3: var(--col3);
}
100% {
--c4: var(--col4);
}
}
<div class="logo"></div>
Note: you will want to change the %s in the radial gradient to get the effect you want (or change to px if you want exactly the same widths on any viewport dimensions).
UPDATE: from subsequent comments it transpires that the problem is actually simpler than the solution given above. Rather than each ring appearing in a step, it is required that the rings grow til they reach the required size, then the next ring grows.
We can get this effect by having the multi ring background on a pseudo element all the time (no need to change it dynamically like in the above) and simply increase its size from zero so the rings appear to grow in a continuous way.
.logo {
position: relative;
width: 100vmin;
height: 100vmin;
--col1: #a5bc1f;
--col2: #99ae21;
--col3: #707d28;
--col4: #4a4f2d;
}
.logo::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: radial-gradient(var(--col1) 0 10vmin, var(--col2) 10vmin 20vmin, var(--col3) 20vmin 30vmin, var(--col4) 30vmin 40vmin, transparent 40vmin 100vmin);
animation: ripple 4s linear 1;
animation-fill-mode: forwards;
border-radius: 50%;
z-index;
-1;
}
#keyframes ripple {
0% {
width: 0;
height: 0;
}
100% {
width: 100vmin;
height: 100vmin;
}
}
.logo::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background-color: #303030;
z-index: -2;
}
<div class="logo"></div>
Related
Good day, there was the task to make the animation of an airplane flying around a path. I decided to take advantage of the opportunities in CSS3. But all I have achieved is one animation cycle. The plane flies one circle around the path and the animation stops. I tried using animation-iteration-count with infinite, but all I got was the flight of a plane in chaotic directions. Below is my code, please tell me how to loop this animation so that the plane constantly flies in a circle without stopping.
Code
.wrap {
margin: 100px;
}
.route {
height: 200px;
width: 400px;
border: 3px dotted #000;
position: relative;
}
.plane {
position: absolute;
bottom: -13px;
left: 100%;
animation-iteration-count: 3;
animation: flyLeft 1.5s linear forwards, rotatePlane 0.5s linear 1.5s forwards, flyUp 1s linear forwards 2s, RotateRight 0.5s linear 2.8s forwards, MoveRight 3s linear forwards 3s, RotateDown 1s linear 6s forwards, flyDown 1s linear forwards 7s, RotateLeft 1s linear 7.8s forwards;
}
#keyframes flyLeft {
100% {
left: -14px;
}
}
#keyframes rotatePlane {
100% {
transform: rotateZ(90deg);
}
}
#keyframes flyUp {
100% {
bottom: 100%;
}
}
#keyframes RotateRight {
0% {
transform: rotateZ(90deg);
}
100% {
transform: rotateZ(180deg);
}
}
#keyframes MoveRight {
0% {
left: -14px;
}
100% {
left: 380px;
}
}
#keyframes RotateDown {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(270deg);
}
}
#keyframes flyDown {
0% {
bottom: 100%;
}
100% {
bottom: -8%;
}
}
#keyframes RotateLeft {
0% {
transform: rotateZ(270deg);
}
100% {
transform: rotateZ(360deg);
}
}
<div class="wrap">
<div class="route">
<img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
</div>
</div>
You need to wrap all the animations in one #keyframes CSS at-rules to easily make repetitions. Here's a working solution below that wraps all the animations in one #keyframes.
.wrap {
margin: 100px;
}
.route {
height: 200px;
width: 400px;
border: 3px dotted #000;
position: relative;
}
.plane {
position: absolute;
right: 0;
bottom: 0;
transform: translate(50%, 50%);
animation: travelRoundTheBorder 10s linear infinite;
}
#keyframes travelRoundTheBorder {
30% {
bottom: 0;
right: 100%;
transform: translate(50%, 50%);
}
32.5% {
bottom: 0;
right: 100%;
transform: translate(50%, 50%) rotate(90deg);
}
47.5% {
right: 100%;
bottom: 100%;
transform: translate(50%, 50%) rotate(90deg);
}
50% {
right: 100%;
bottom: 100%;
transform: translate(50%, 50%) rotate(180deg);
}
80% {
right: 0;
bottom: 100%;
transform: translate(50%, 50%) rotate(180deg);
}
82.5% {
right: 0;
bottom: 100%;
transform: translate(50%, 50%) rotate(270deg);
}
97.5% {
right: 0;
bottom: 0;
transform: translate(50%, 50%) rotate(270deg);
}
100% {
right: 0;
bottom: 0;
transform: translate(50%, 50%) rotate(360deg);
}
}
<div class="wrap">
<div class="route">
<img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
</div>
</div>
Splitting the movement along the path and the turns into TWO separate keyframes makes this easier.
The math of the percentages is based on a square but with a rectangle the percentages change.
CSS variable could help here to work out those percentages but I haven't gone deeper into that for the demo purposes.
.wrap {
margin: 10px;
}
.route {
height: 150px;
width: 150px;
margin: auto;
border: 3px dotted #000;
position: relative;
}
.plane {
position: absolute;
transform: translate(-50%, -50%) rotate(180deg);
top: 0;
left: 0;
animation: path 6s linear infinite, turn 6s ease infinite;
}
#keyframes path {
0%,
100% {
left: 0;
top: 0;
}
25% {
left: 100%;
top: 0;
}
50% {
left: 100%;
top: 100%;
}
75% {
left: 0;
top: 100%;
}
}
#keyframes turn {
0%,
24% {
transform: translate(-50%, -50%) rotate(180deg);
}
25%,
49% {
transform: translate(-50%, -50%) rotate(270deg);
}
50%,
74% {
transform: translate(-50%, -50%) rotate(0deg);
}
75%,
99% {
transform: translate(-50%, -50%) rotate(90deg);
}
100% {
transform: translate(-50%, -50%) rotate(90deg);
}
}
<div class="wrap">
<div class="route">
<img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
</div>
</div>
Just to begin testing new CSS posibilities, offset-path (not supported in IE, experimental in FF)
reference
#container {
width: 400px;
height: 300px;
border: dotted 5px black;
margin: 30px;
}
#motion-demo {
offset-path: path('M0 -10 H400 A 10 10 1 0 1 410 0 V300 A 10 10 1 0 1 400 310 H0 A 10 10 1 0 1 -10 300 V0');
animation: move 10s infinite linear;
width: 40px;
height: 40px;
background: cyan;
}
#keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
<div id="container">
<div id="motion-demo">A</div>
</div>
Hi StackOverflow community,
I am trying to produce an "Orbit" on-hover animation, where a number of div elements are stacked on top of one another and they have different sizes so I can play with the borders circling around the "planet" (ie: main element).
My problem though is that it seems like when I stack one div over another and both are supposed to be animated, only the front element plays the animation and not those under.
I thought a z-index property could fix this, but as I thought about this I just thought I'd be switching one animation for the other, since the one I'd elevate with the z-index would then become the front and cover the one element that's now below.
Here's some code:
#spinner {
position: relative;
display: inline-block;
margin: 50px;
width: 100px;
height: 100px;
background: #eee;
border-radius: 50%;
}
/* -- -- -- Spin Animation -- -- -- */
#spinner-1 {
position: absolute;
top: -4px;
left: -4px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: black;
border-bottom-color: black;
}
#spinner-1:hover {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* -- -- -- Orbit Ring -- -- -- */
#spinner-4 {
position: absolute;
top: -8px;
left: -8px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#spinner-4:hover {
animation: spin-2 2s linear infinite;
}
#keyframes spin-2 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.3);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
}
<div id="spinner">
<div id="spinner-1"></div>
<div id="spinner-4"></div>
</div>
So, basically I want both spinner-1 and spinner-4 to execute their animation when I hover over the spinner. Any ideas?
Set the hover on their shared parent element.
#spinner {
position: relative;
display: inline-block;
margin: 50px;
width: 100px;
height: 100px;
background: #eee;
border-radius: 50%;
}
/* -- -- -- Spin Animation -- -- -- */
#spinner-1 {
position: absolute;
top: -4px;
left: -4px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: black;
border-bottom-color: black;
}
#spinner:hover #spinner-1 {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* -- -- -- Orbit Ring -- -- -- */
#spinner-4 {
position: absolute;
top: -8px;
left: -8px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#spinner:hover #spinner-4 {
animation: spin-2 2s linear infinite;
}
#keyframes spin-2 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.3);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
}
<div id="spinner">
<div id="spinner-1"></div>
<div id="spinner-4"></div>
</div>
I would like to use the progress-bar here at https://bootsnipp.com/snippets/featured/circle-progress-bar, but I don't know how to set less than 50% when you have 2, 3 or more types (each got different percentage) of these on your website, because this code sets right-side of bar for every type u got there and I don't know what to do when I want less than 50% only at 3.
Type of bar:
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
+
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
Could someone help me please ?
Using SVG
svg {
transform: rotate(-90deg);
stroke-dasharray: 251; /* (2PI * 40px) */
stroke-dashoffset: 251;
animation: offsettozero 5s linear forwards;
}
#keyframes offsettozero {
to {
stroke-dashoffset: 0;
}
}
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="#428bca" stroke-width="6" fill="#333" />
</svg>
<!-- VV Click "Run code snippet" for demo -->
Since the right-side animation is shared among all the progress circles, if you want to make one that is less than 50%, you'll have to override that generic style. Then you won't need a left-side animation.
So your CSS would be something like:
.progress.yourDiv .progress-right .progress-bar {
animation: yourAnimation 1.8s linear forwards;
}
.progress.yourDiv .progress-left .progress-bar{
animation: none;
}
Where yourAnimation is the same as the shared right-side rule for .progress .progress-right .progress-bar in the Bootstrap example, except the name is changed.
For an animation to 37.5%, yourAnimation would look like this:
#keyframes yourAnimation{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
Here's an example, where .yourDiv is .yellow and yourAnimation is loading-3.
.progress {
width: 150px;
height: 150px !important;
float: left;
line-height: 150px;
background: none;
margin: 20px;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress>span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: #44484b;
font-size: 24px;
color: #fff;
line-height: 135px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar {
border-color: #049dff;
}
.progress.blue .progress-left .progress-bar {
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar {
border-color: #fdba04;
}
.progress.yellow .progress-right .progress-bar {
animation: loading-3 1.8s linear forwards;
}
.progress.yellow .progress-left .progress-bar {
animation: none;
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress yellow">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">37.5%</div>
</div>
</div>
I have a css file which makes circle border fill animation perfectly. Its in 100px width and height. But i need only in 50px width and height circle with the same animation. I tried many more times to minimize the size, but the circle not get correctly fix with animation. please help me to smaller this circle.
My need:
Width-50px
Height -50px
border size as per the image file attached -circle border fill sample image
My code
#loading
{
width: 100px;
height: 100px;
margin: 30px auto;
position: relative;
}
.outer-shadow, .inner-shadow
{
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow
{
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-left: -40px;
margin-top: -40px;
border-radius: 100%;
background-color: #ffffff;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold
{
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px, 100px, 100px, 50px);
border-radius: 100%;
background-color: #fff;
}
.fill, .dot span
{
background-color: #f50;
}
.fill
{
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
}
.left .fill
{
z-index: 1;
-webkit-animation: left 1s linear ;
-moz-animation: left 1s linear ;
animation: left 1s linear both;
}
#keyframes left
{
0%{-webkit-transform:rotate(0deg);}
100%{transform:rotate(180deg);}
}
#-webkit-keyframes left
{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(180deg);}
}
.right
{
z-index: 3;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.right .fill
{
z-index: 3;
-webkit-animation: right 1s linear ;
-moz-animation: right 1s linear ;
animation: right 1s linear both ;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes right
{
0%{-webkit-transform:rotate(0deg);}
100%{transform:rotate(180deg);}
}
#-webkit-keyframes right
{
0% {transform: rotate(0deg);}
100% {transform: rotate(180deg);}
}
My code in jsfiddle...!
You need to divide by 2 every values involved, even the clip(); ones (fiddle updated)
#loading {
width: 50px;
height: 50px;
margin: 30px auto;
position: relative;
}
.outer-shadow,
.inner-shadow {
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow {
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
border-radius: 100%;
background-color: #ffffff;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px, 50px, 50px, 25px);
border-radius: 100%;
background-color: #fff;
}
.fill,
.dot span {
background-color: #f50;
}
.fill {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
z-index: 1;
-webkit-animation: left 1s linear;
-moz-animation: left 1s linear;
animation: left 1s linear both;
}
#keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
.right {
z-index: 3;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.right .fill {
z-index: 3;
-webkit-animation: right 1s linear;
-moz-animation: right 1s linear;
animation: right 1s linear both;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes right {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
margin-left: 8px;
margin-top: 7px;
}
<div id='loading'>
<div class='outer-shadow'>
</div>
<div class='inner-shadow'>
</div>
<div class='hold left'>
<div class='fill'></div>
</div>
<div class='hold right'>
<div class='fill'></div>
</div>
</div>
edit: in respond to comment #Filipe
How would the change from clip to clip-path be? I tried (also changing rect to inset), but the animation stops working.
Possible example with clip-path instead clip .
#loading {
width: 50px;
height: 50px;
margin: 30px auto;
position: relative;
}
.outer-shadow,
.inner-shadow {
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow {
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
border-radius: 100%;
background-color: #ffffff;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(50% 0, 0 0, 0 100%, 50% 100%);
border-radius: 100%;
background-color: #fff;
}
.fill,
.dot span {
background-color: #f50;
}
.fill {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.left .fill {
z-index: 1;
-webkit-animation: left 1s linear;
-moz-animation: left 1s linear;
animation: left 1s linear both;
}
#keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
.right {
z-index: 3;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.right .fill {
z-index: 3;
-webkit-animation: right 1s linear;
-moz-animation: right 1s linear;
animation: right 1s linear both;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes right {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
margin-left: 8px;
margin-top: 7px;
}
<div id='loading'>
<div class='outer-shadow'>
</div>
<div class='inner-shadow'>
</div>
<div class='hold left'>
<div class='fill'></div>
</div>
<div class='hold right'>
<div class='fill'></div>
</div>
</div>
is this what you expect,hope this will help to you.try this.I only concerned about the circle size of 50 px with inside circle.if this is not the case tell me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery</title>
<style type="text/css">
div.circleone{
width: 50px;
height: 50px;
border-radius: 25px;
box-shadow: 1px 2px 1px black;
}
div.circletwo
{
width: 25px;
height: 25px;
border-radius: 12.5px;
box-shadow: 1px -1px 1px black;
position: relative;
top: 25%;
left: 25%;
}
</style>
</head>
<body>
<div class="circleone">
<div class="circletwo"></div>
</div>
</body>
</html>
I have this pen which tries to emulate an object revolving around something. This works, but it isn't smooth. While revolving it pauses around the left and right edges.
I thought it had something to do with animation-timing-function but can't get the desired result with any of the in-built functions like ease-in-out or linear or a custom cubic-bezier function.
How can I make the animation feel smooth? If there are better ways something like this can be done, feel free to let me know.
.overlay {
background-image: -webkit-repeating-linear-gradient(0deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%);
background-image: repeating-linear-gradient(90deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%);
height: 200px;
position: relative;
width: 40%;
margin: auto;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #888;
position: absolute;
z-index: -1;
left: 0;
display: inline-block;
}
.move {
-webkit-animation: moveAndGlow 2s infinite ease-in-out;
animation: moveAndGlow 2s infinite ease-in-out;
}
#-webkit-keyframes moveAndGlow {
25% {
background: #ccc;
-webkit-transform: scale(.5);
transform: scale(.5);
margin-top: 25px;
}
50% {
left: 100%;
margin-left: -100px;
background: #888;
-webkit-transform: scale(1);
transform: scale(1);
margin-top: 0;
}
75% {
background: #000;
-webkit-transform: scale(1.5);
transform: scale(1.5);
margin-top: 25px;
}
}
#keyframes moveAndGlow {
25% {
background: #ccc;
-webkit-transform: scale(.5);
transform: scale(.5);
margin-top: 25px;
}
50% {
left: 100%;
margin-left: -100px;
background: #888;
-webkit-transform: scale(1);
transform: scale(1);
margin-top: 0;
}
75% {
background: #000;
-webkit-transform: scale(1.5);
transform: scale(1.5);
margin-top: 25px;
}
}
<div class="overlay">
<span class="circle move"></span>
</div>
If you want to move you element in a 3d environement, you can use the perspective property and actual 3d rotation.
Right now you are animating on straight lines between positions so simulating a rotation is almost imposible. I built the following example, you will need to tweak the size to fit it into your project but you should get the idea.
Also note that I put the gradient background in a pseudo element so it appear in front of the moving object :
.overlay {
height: 200px;
position: relative;
width: 40%;
margin: auto;
perspective:500px;
margin-top:50px;
}
.overlay:after{
content:'';
position:absolute;
top:-100px; left:-10%;
width:120%; height:100%;
background-image: repeating-linear-gradient(90deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%);
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #888;
position: absolute;
z-index: -1;
left: 50%;
margin-left:-50px;
transform: rotateY(0deg) translateX(-100px) rotateY(0deg);
display: inline-block;
}
.move {
animation: moveAndGlow 2s infinite linear;
}
#keyframes moveAndGlow {
to{ transform:rotateY(360deg) translateX(-100px) rotateY(-360deg); }
}
<div class="overlay">
<span class="circle move"></span>
</div>
I found this made it smoother
.move {
-webkit-animation: moveAndGlow 2s infinite linear;
animation: moveAndGlow 2s infinite linear;
}
#-webkit-keyframes moveAndGlow {
25% {
background: #ccc;
-webkit-transform: scale(.5);
transform: scale(.5);
margin-top: 25px;
-webkit-animation-timing-function:ease-in;
}
50% {
left: 100%;
margin-left: -100px;
background: #888;
-webkit-transform: scale(1);
transform: scale(1);
margin-top: 0;
-webkit-animation-timing-function:ease-out;
}
75% {
background: #000;
-webkit-transform: scale(1.5);
transform: scale(1.5);
margin-top: 25px;
-webkit-animation-timing-function:ease-in;
}
}