Related
I want to create an animation showing a few circles moving one after another in orbit. Currently, I created three circles but they appear on separate lines and thus move in a circular movement, but as a line. How can I change the code to achieve the movement that I want? Here's a codepen with the current status.
Here's the code that I use:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 1.6;
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
}
.loader {
height: 50px;
animation: rotate 6s linear infinite;
}
.circle {
display: inline-block;
background-color: purple;
height: 40px;
width: 40px;
border-radius: 50%;
transform: scale(0);
animation: grow 1.5s linear infinite;
margin: -20p;
}
.circle:nth-child(2) {
background-color: palevioletred;
transform: scale(0);
animation-delay: 0.20s;
}
#keyframes rotate {
to {
transform: rotate(360deg)
}
}
#keyframes grow {
50% {
transform: scale(1);
}
}
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
I'm creating full-size "plates" which I can set to an initial rotation point. The circles end up as pseudo-elements on the plates (to avoid extra markup). Modify the initial rotation values to bring the circles closer together.
.loader {
width: 100px;
height: 100px;
animation: rotate 6s linear infinite;
position: relative;
}
.plate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.plate:nth-child(2) {
transform: rotate(120deg);
}
.plate:nth-child(3) {
transform: rotate(240deg);
}
.plate:before {
content: '';
position: absolute;
background-color: red;
height: 40px;
width: 40px;
border-radius: 50%;
transform: scale(0);
animation: grow 1.5s linear infinite;
}
.plate:nth-child(2):before {
background: green;
}
.plate:nth-child(3):before {
background: blue;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
#keyframes grow {
50% {
transform: scale(1);
}
}
* {
box-sizing: bordr-box;
margin: 0;
padding: 0;
}
body {
font-family: "Lato", sans-serif;
font-size: 18px;
line-height: 1.6;
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
}
<body>
<div class="loader">
<div class="plate"></div>
<div class="plate"></div>
<div class="plate"></div>
</div>
</body>
#isherwood provided a great solution that's easily workable in most modern browsers. But let's say you want more complex motion, like an elliptical orbit.
SVG Animation
You could build the whole thing into an SVG since that supports lots of cool animation while being quite performant. But building SVGs and animating them from scratch is kinda complicated. Luckily, there are tools to help. Here's a few examples: Snapsvg (code library), SVGGator (Web-based animation tool) or Bodymovin (After Effects workflow).
But let's say you want to stick with what can be done in HTML/CSS.
CSS Motion Path
Sadly support is, not great as of Summer 2019 but it will likely be improving. If your audience is using the right browsers (Chrome, Opera, Edge or Chromium based mobile browsers). It's actually pretty easy to use but there are some gotchas. For example, it appears that only the path() property works right now. So you can't use shape keywords like circle() or ellipse() though they're in the spec.
main {
position: relative;
margin: 20px;
}
main,svg {
width: 100px;
height: 100px;
}
path {
stroke-width: 1px;
}
svg {
position:absolute;
opacity: 0.5;
}
#c1 {
stroke: red;
}
#c2 {
stroke: blue;
}
#c3 {
stroke: green;
}
div[class*="c"] {
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.3);
}
.c1 {
background-color: red;
offset-path: path('M50,2 C78.2166667,2 98,22.2364005 98,50.5 C98,78.7635995 75.5694444,99 50,99 C24.4305556,99 2,76.5476997 2,50.5 C2,24.4523003 21.7833333,2 50,2 Z');
animation: moveme 5s ease-in-out infinite;
}
.c2 {
background-color: blue;
offset-path: path('M55,13 C80.2774306,13 98,30.9415509 98,56 C98,81.0584491 77.9059606,99 55,99 C32.0940394,99 12,79.0938368 12,56 C12,32.9061632 29.7225694,13 55,13 Z');
animation: moveme 5.25s linear infinite;
}
.c3{
background-color: green;
offset-path: path('M36.0041619,30.5873511 C61.3414991,12.7718541 90.4202796,4.99194919 98.2799065,16.2635432 C106.139533,27.5351371 85.805943,52.9370587 62.845696,69.0811471 C39.885449,85.2252355 7.31148243,93.0730731 1.30061213,84.4528052 C-4.71025818,75.8325372 10.6668246,48.4028481 36.0041619,30.5873511 Z');
animation: moveme 5.5s linear infinite;
}
#keyframes moveme {
100% {
motion-offset: 100%;
offset-distance: 100%;
}
}
<main>
<!-- paths for example -->
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="orbit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M50,2 C78.2166667,2 98,22.2364005 98,50.5 C98,78.7635995 75.5694444,99 50,99 C24.4305556,99 2,76.5476997 2,50.5 C2,24.4523003 21.7833333,2 50,2 Z" id="c1"></path>
<path d="M55,13 C80.2774306,13 98,30.9415509 98,56 C98,81.0584491 77.9059606,99 55,99 C32.0940394,99 12,79.0938368 12,56 C12,32.9061632 29.7225694,13 55,13 Z" id="c2"></path>
<path d="M36.0041619,30.5873511 C61.3414991,12.7718541 90.4202796,4.99194919 98.2799065,16.2635432 C106.139533,27.5351371 85.805943,52.9370587 62.845696,69.0811471 C39.885449,85.2252355 7.31148243,93.0730731 1.30061213,84.4528052 C-4.71025818,75.8325372 10.6668246,48.4028481 36.0041619,30.5873511 Z" id="c3"></path>
</g>
</svg>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</main>
I am trying to create a loading screen but with no success.
Animation looks exactly as it is supposed to look but back-ground itself is a problem, whenever i am trying to change opacity, opacity of text changes as well.
#import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');
.yes
{
background:black ;
}
.loading {
font-family: PT Sans Narrow;
font-weight: bold;
font-size: 30px;
color:black;
top: 45%;
left: 45%;
position: absolute;
color:white !important;
}
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation: ellipsis steps(5,end) 1000ms infinite;
animation: ellipsis steps(5,end) 1000ms infinite;
content: "...."; /* ascii code for the ellipsis character */
width: 0px;
}
#keyframes ellipsis {
to {
width: 0.9em;
}
}
#-webkit-keyframes ellipsis {
to {
width: 1em;
}
}
<body class="yes">
<p class=" loading ">Loading</p>
</body>
Use RGBA as the background color. The 4th parameter of rgba (the a) is the alpha channel - the opacity of the color. The alpha is a number between 0 (fully transparent) and 1 (opaque).
background: rgba(0, 0, 0, 0.5);
Since it's only the background color, it doesn't effect any of the children of the element.
#import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');
body {
margin: 0;
background: url(http://lorempixel.com/1200/600);
background-size: cover;
}
.yes {
height: 100vh;
background: rgba(0, 0, 0, 0.5);
}
.loading {
font-family: PT Sans Narrow;
font-weight: bold;
font-size: 30px;
color: black;
top: 45%;
left: 45%;
position: absolute;
color: white !important;
}
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation: ellipsis steps(5, end) 1000ms infinite;
animation: ellipsis steps(5, end) 1000ms infinite;
content: "....";
/* ascii code for the ellipsis character */
width: 0px;
}
#keyframes ellipsis {
to {
width: 0.9em;
}
}
#-webkit-keyframes ellipsis {
to {
width: 1em;
}
}
<div class="yes">
<p class=" loading ">Loading</p>
</div>
If you are trying to change the opacity for the background color, just try with RGBA. where the last argument is the opacity
background-color: rgba(0, 0, 0, 0.5);
Add this property in your css class instead of background:black;
.yes{background: rgba(0,0,0,0.6); }
Always use rbga. This allows us to fill areas with transparent color; the first thee numbers representing the color in RGB values and the fourth representing a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque). We have long had the opacity property, which is similar, but opacity forces all decendant elements to also become transparent and there is no way to fight it
I've been trying to animate a svg border, I've gotten as far as this
html {
background: white;
}
div {
position: fixed;
height: 200px;
width: 605px;
position: fixed;
left: 30%
}
.mainNav {
position: fixed;
top: 6;
}
[class="navBorder"] .outline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
stroke: #7272f8;
stroke-width: 11px;
fill: none;
}
.navBorder .outline {
stroke-dasharray: 2000;
stroke-dashoffset: 1900;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.navBorder:hover .outline {
stroke-dasharray: 1100 0;
stroke-dashoffset: 0;
}
<div>
<a class="navBorder" target="_blank">
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="outline" height="100%" width="100%" />
</svg>
</a>
</div>
http://codepen.io/lorehill/pen/pEPXar
The problem is I can't seem to get the starting position of the border to be on the top center and then close center bottom.
I'm very confused trying to figure out how to calculate the values I need to set stroke-dasharray and stroke-dashoffset for the starting position in order to get the effect I'm after.
If anyone could explain it like I'm 5 that would be fantastic.
Thank you!
AFAIK, the starting position of the stroke is always the starting point of the rect which is top left for a rect element.
I can't seem to get the starting position of the border to be on the top center and then close center bottom.
I think you'll need two polyline elements for that, although you can use the same class on both.
svg {
height: 100px;
margin: 1em;
}
.outline {
fill: lightblue;
stroke-dasharray: 200;
stroke-dashoffset: 190;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
svg:hover .outline {
stroke-dasharray: 200 0;
stroke-dashoffset: 0;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
<polyline class="outline" points="50,0 100,0, 100,100 50,100" style="stroke:#660000; stroke-width: 3;" />
<polyline class="outline" points="50,0 0,0 0,100 50,100" style="stroke:#660000; stroke-width: 3;" />
</svg>
Codepen Demo
I've been trying to achieve the effect seen here for one wave in a circle:
http://www.jquery-az.com/css/demo.php?ex=131.0_1
Unfortunately, I've been unable to get the animation to repeat smoothly with my own svg, seen here: http://jsbin.com/diserekigo/1/edit?html,css,output. You'll also notice that the bottom "rectangle" part isn't filled either.
My css is as follows:
.circle {
border-radius: 100%;
border: 1px solid black;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
perspective: 1px;
}
.liquid {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
-webkit-transform: translate(0, 80%);
transform: translate(0, 80%);
}
.wave {
left: 0;
width: 400%;
position: absolute;
bottom: 100%;
margin-bottom: -1px;
-webkit-animation: wave-front .7s infinite linear;
animation: wave-front 0.7s infinite linear;
}
#-webkit-keyframes wave-front {
100% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
}
#keyframes wave-front {
100% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
}
How can I improve the repeating behavior, as well as make the wave fill up the entire space beneath it?
You're missing a lot from the original demo. Why not just copy and paste and make whatever local changes to the size and position you wanted? Most of your issues are a result of not having all the SVG elements - the original demo has 3, not just 1. I've added them into your jsbin to get it to work:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="display: none;">
<symbol id="wave">
<path d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path>
<path d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path>
<path d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path>
<path d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path>
</symbol>
</svg>
<div class="circle">
<div class="liquid"></div>
<div id="water" class="water">
<svg viewBox="0 0 560 20" class="water_wave water_wave_back">
<use xlink:href="#wave"></use>
</svg>
<svg viewBox="0 0 560 20" class="water_wave water_wave_front">
<use xlink:href="#wave"></use>
</svg>
</div>
</div>
You also need JavaScript to get the water to fill.
http://jsbin.com/pinowufeqe/edit?html,css,js,output
I am trying to make a fancy animation only in CSS. I started with a tutorial on W3 School and wanted to make it better. My idea is to have a square loader turning clockwise while another inside would turn in the opposite direction.
On this link you will see what I'm talking about, the only difference is that I would like the red part to be turning in the opposite direction.
In order to do so I tried adding another div with class name .spinner. Here's my try at it: https://jsfiddle.net/avhjj4ps/
.loader-container {
position: absolute;
left: calc(50% - 75px);
width: 150px;
height: 150px;
padding: 5px;
border: 1px solid red;
top: calc(50% - 75px);
}
img {
width: 200px;
margin: 20px;
/*animation: move 2s alternate infinite linear;*/
}
#myClip, #svg {
position: absolute;
left: 50%;
top: 50%;
}
.loader, .spinner {
position: absolute;
}
.loader {
left: calc(50% - 35px);
top: calc(50% - 35px);
width: 40px;
height: 40px;
border: 15px solid transparent;
border-top: 15px solid none;
/*-webkit-animation: loader 2s linear infinite;
animation: loader 2s linear infinite;*/
}
.spinner {
left: calc(50% - 55.1px);
top: calc(50% - 55.1px);
/*clip-path: url(#myClip);*/
width: 40px;
border-radius: 50%;
height: 40px;
border: 36px solid #f3f3f3;
border-top: 36px solid #5cb85c;
/*-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;*/
}
#-webkit-keyframes loader {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes loader {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(-360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
<div class="loader-container">
<div class="loader"></div>
<div class="spinner"></div>
<svg id="svg" width="0" height="0">
<defs>
<clipPath id="myClip">
<rect x="-35" y="-35" width="15" height="70" />
<rect x="20" y="-35" width="15" height="70" />
<rect x="-35" y="-35" width="70" height="15" />
<rect x="-35" y="20" width="70" height="15" />
</clipPath>
</defs>
</svg>
</div>
I am trying to show the green spinner only where there is the square loader. It would be like a mask. In the above snippet (also available here: http://codepen.io/anon/pen/ZOoByA), I'm trying to use the clip-path property.
Can some tell me why clip-path: url(#myClip); doesn't work ? When I comment this line the loader shows completely, however while active it's not showing at all.
You can create your loader in svg with some polygons and then clip the inner green loader away with clipPath.
First, define the gray border as a polygon:
<polygon id="loader" points="0,0 0,70 70,70 70,0 0,0 15,15 55,15 55,55 15,55 15,15" />
As we will reuse this shape (the actual loader and the clip-path shape), we put into the defs tag:
<svg height="0" width="0">
<defs>
<polygon id="loader" points="..." />
</defs>
</svg>
Then we put the clipPath into the same defs tag:
<clipPath id="loaderClipper">
<use xlink:href="#loader" x="15" y="15" />
</clipPath>
The offset of 15 is calculated in the following way: The loader's width is 70, but if it is rotated by 45 degrees, it's width is 70√2 which rounds to 100. The whitespace in the left and in the right is (100 - 70) / 2 = 15.
The svg for the actual used element looks like this:
<svg width="100" height="100" viewbox="0 0 100 100" clip-path="url(#loaderClipper)">
<use xlink:href="#loader" class="loader" x="15" y="15" />
<polygon class="spinner" points="0,0 100,0 50,50" x="30" y="30" />
</svg>
And some css for colors and the animation:
svg {
animation: rotate 2s linear infinite;
transform-origin: 50px 50px;
}
.loader {
fill: #dcdada;
}
.spinner {
fill: #5cb85c;
animation: rotate 1s linear infinite reverse;
transform-origin: 50px 50px;
}
Result fiddle: https://jsfiddle.net/apLepsv3/10/
Successfully tested on both mobile and desktop Firefox and Chrome.
For a CSS-only solution without SVG you need some helper elements:
<div class="loader">
<div class="square"></div>
<div class="cutter">
<div class="spinner">
</div>
</div>
</div>
And then this CSS code:
.square {
width: 40px;
height: 40px;
background: #f3f3f3;
z-index: 1;
}
.cutter {
width: 70px;
height: 70px;
left: -15px;
top: -15px;
overflow: hidden;
}
.spinner {
width: 54px;
border-radius: 50%;
height: 54px;
border: 8px solid transparent;
border-top: 8px solid #5cb85c;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
margin-left: -15px;
margin-top: -15px;
}
Result: https://jsfiddle.net/avhjj4ps/3/
Disadvantage: Inner square must have a solid background (no gradient or image) if it has to match the parent's / body's background.
You can create the spinner with HTML and CSS and then cut the overflow away by using the clip-path property in combination with a svg <clipPath> element.
Your html structure of the spinner:
<div class="loader">
<div class="spinner">
</div>
</div>
Now position the two elements over each other:
.loader {
width: 40px;
height: 40px;
position: relative;
left: 30px;
top: 30px;
border: 15px solid #dcdada;
border-top: 15px solid none;
-webkit-animation: loader 2s linear infinite;
animation: loader 2s linear infinite;
}
.spinner {
width: 0px;
height: 0px;
position: relative;
left: -30px;
top: -30px;
border: 50px solid transparent;
border-top: 50px solid #5cb85c;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
But there's still that green overflow outside and inside of the gray border. So we need to cut it away with a svg <polygon>.
<svg height="0" width="0">
<defs>
<clipPath id="loaderClipper">
<polygon points="0,0 0,70 70,70 70,0 0,0 15,15 55,15 55,55 15,55 15,15"/>
</clipPath>
</defs>
</svg>
The points define a 70x70 square with a 40x40 square cut off.
Then add the clip-path property that references to the svg <clipPath> element:
.loader {
clip-path: url(#loaderClipper);
}
Fiddle: https://jsfiddle.net/apLepsv3/2/
Disadvantage: Only supported in Firefox, not Chrome