I want to animate this arrow but for some reason it is not in line with the text. could you help me please? :)
https://jsfiddle.net/e3ec86rg/
<div id="blogtitle">
<center>
<div id="arrow">⬇</div>
<div style="font-size:18px">Now go <span style="color:{color:permalink border}">that way</span></div>
</center>
edit: This is what bothers me the arrow is a little bit lower than the text.
It's due to float property. Add a negative margin to offset it...
#arrow {
font-size: 18px;
-webkit-animation: bounce 2s infinite ease-in-out;
margin-top: -2px; /* edit as you need */
float: left;
}
jsfiddle
#arrow {
font-size: 18px;
-webkit-animation: bounce 2s infinite ease-in-out;
margin-top: -2px;
float: left;
}
#-webkit-keyframes bounce {
0%,
20%,
60%,
100% {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
}
}
#blogtitle {
position: relative;
height: auto;
z-index: 5;
text-transform: uppercase;
color: {
color: blog title
}
;
font-size:150px;
letter-spacing:2px;
font-weight:bold;
text-align:left;
width:250px;
padding-top: 10px;
padding-left: 10px;
}
<div id="blogtitle">
<center>
<div id="arrow">⬇</div>
<div style="font-size:18px">Now go <span style="color:{color:permalink border}">that way</span></div>
</center>
</div>
Check this
Fiddle
<div id="arrow" style=" margin-top: -3px;">⬇</div>
You can change your transform values:
#-webkit-keyframes bounce {
0%, 20%, 60%, 100% { -webkit-transform: translateY(-5px); }
40% { -webkit-transform: translateY(-25px); }
80% { -webkit-transform: translateY(-15px); }
}
#arrow {
color:{color:permalink border};
font-size:18px;
float:left;
-webkit-animation: bounce 2s infinite ease-in-out;
}
#-webkit-keyframes bounce {
0%, 20%, 60%, 100% { -webkit-transform: translateY(-5px); }
40% { -webkit-transform: translateY(-25px); }
80% { -webkit-transform: translateY(-15px); }
}
#blogtitle{
position:relative;
height:auto;
z-index:5;
text-transform:uppercase;
color:{color:blog title};
font-size:150px;
letter-spacing:2px;
font-weight:bold;
text-align:left;
width:250px;
padding-top: 10px;
padding-left: 10px;
}
<div id="blogtitle">
<center>
<div id="arrow">⬇</div>
<div style="font-size:18px">Now go <span style="color:{color:permalink border}">that way</span></div>
</center>
</div>
Related
body {
background: hsl(210, 100%, 95%);
}
#Title {
font-family: Lobster, monospace;
font-size: 45px;
text-align: center;
color: white;
}
h1:hover {
color: black;
transform: scale(1.2)
}
.circles {
height: 80px;
width: 80px;
border-radius:50%;
border:solid;
position:fixed;
animation-name: 123;
animation-iteration-count: infinite;
animation-duration: 10s;
}
#circle1 {
animation-timing-function: linear;
background: linear-gradient(45deg, #ccffff, #ffcccc);
left:50%;
}
#circle2 {
animation-timing-function: linear;
background: repeating-linear-gradient(90deg, #A52A2A 2px, #cccccc 5px, orange 10px);
left:25%;
}
#keyframes 123 {
50% {
bottom: 10%;
}
}
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<head>
<title>Animation-1</title>
</head>
<body>
<h1 id="Title">Placeholder</h1>
<div class="circles" id="circle1"> </div>
<div class="circles" id="circle2"> </div>
</body>
</html>
Gone over it 3 times already, can't see where im messing up
try to use string instead of number in keyframes naming
here is your animation example. https://codepen.io/baomastr/pen/KKgNGbg
.circles {
height: 80px;
width: 80px;
border-radius: 50%;
border: solid;
position: absolute;
animation-name: test;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 5s;
}
#circle1 {
background: linear-gradient(45deg, #ccffff, #ffcccc);
left: 50%;
}
#circle2 {
background: repeating-linear-gradient(
90deg,
#a52a2a 2px,
#cccccc 5px,
orange 10px
);
left: 25%;
}
#keyframes test {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
<div class="circles" id="circle1"> </div>
<div class="circles" id="circle2"> </div>
1st is keyframe with number is not accepted. 2nd In you keyframe you need to specify 0% and 100% as well. To be for example like:
#keyframes slidein {
0% { bottom: 60%; }
50% { bottom: 10%; }
100% { bottom: 0%; }
}
DEMO:
body {
background: hsl(210, 100%, 95%);
}
#Title {
font-family: Lobster, monospace;
font-size: 45px;
text-align: center;
color: white;
}
h1:hover {
color: black;
transform: scale(1.2)
}
.circles {
height: 80px;
width: 80px;
border-radius:50%;
border:solid;
position:fixed;
animation-name: slidein;
animation-iteration-count: infinite;
animation-duration: 10s;
}
#circle1 {
animation-timing-function: linear;
background: linear-gradient(45deg, #ccffff, #ffcccc);
left:50%;
}
#circle2 {
animation-timing-function: linear;
background: repeating-linear-gradient(90deg, #A52A2A 2px, #cccccc 5px, orange 10px);
left:25%;
}
#keyframes slidein {
0% { bottom: 60%; }
50% { bottom: 10%; }
100% { bottom: 0%; }
}
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<head>
<title>Animation-1</title>
</head>
<body>
<h1 id="Title">Placeholder</h1>
<div class="circles" id="circle1"> </div>
<div class="circles" id="circle2"> </div>
</body>
</html>
When testing my landing page on mobile view, there are weird spaces on each side of the image that allows the user to scroll and see white space. How can this be fixed? I just want it to collapse and look nice as one image with text on it on mobile view. Thanks. I want it to look like this tutorial But I keep getting white space on the sides.
*{
margin:0;
padding:0;
}
.fade-in{
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: animationFrames ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
}
#keyframes animationFrames{
0% {
opacity:0;
transform: translate(0px,-25px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
#-moz-keyframes animationFrames{
0% {
opacity:0;
-moz-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}
#-webkit-keyframes animationFrames {
0% {
opacity:0;
-webkit-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}
#-o-keyframes animationFrames {
0% {
opacity:0;
-o-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}
#-ms-keyframes animationFrames {
0% {
opacity:0;
-ms-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}
#showcase{
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8Ilf-i2TXplUrTBJ-ugwuyd8X8mxhgMD44UQOvcawkbXx2IzNKBLWVrLA');
background-size:cover;
background-position:center;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding: 0 20px;
}
#showcase h1{
font-size:50px;
line-height:1.2;
color:#fff;
font-family: montserrat;
letter-spacing: 10px;
}
#showcase h2{
font-size:25px;
line-height:1.2;
color:#fff;
font-family: montserrat;
}
#showcase .button{
font-size:18px;
text-decoration:none;
color:darkgreen;
padding: 10px 20px;
border-radius:10px;
margin-top:20px
}
#showcase .button:hover{
background-color: darkgreen;
color:#fff;
}
#logo {
z-index: 1;
position: absolute;
float: left;
height: 30px;
padding: 7px;
}/*effects the post logo in the top left of the page*/
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<div class="wrapper fade-in">
<header id="showcase">
<h1>TITLE HERE</h1>
<h2>2017</h2>
<i class="fa fa-angle-double-right" style="font-size:36px"></i>
</header>
</div>
</div>
</body>
This is my landing page header css for background and haven't had any issues with it on mobile or desktop:
header {
position: relative;
width: 100%;
overflow-y: hidden;
/* fallback for old browsers */
background-image: url("../img/sample.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 50% 0;
}
Hope this helps.
How can I adjust the width of how long the <hr class="content-divider"> is but I need it to be responsive. I don't want the line to go past from where the buttons on each side end.
My site code.
Here is the html to the line divider.
<hr class="content-divider">
Update css part
.content-divider {
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
position:relative; /*Add this*/
left:0px; /*Add this*/
right:0px; /*Add this*/
margin: 20px auto; /*Add this you can change as your need*/
max-width:70%; /*Add this*/
}
Working fiddle - fiddle link
body {
background-color: #1b1b1b;
}
#app {
display: none;
}
#splash {
margin: 200px auto;
}
#splash span {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
position: absolute;
left: 50%;
margin-left: -10px;
-webkit-animation: 3s infinite linear;
-moz-animation: 3s infinite linear;
-o-animation: 3s infinite linear;
}
#splash span:nth-child(2) {
background: white;
-webkit-animation: kiri 1.2s infinite linear;
-moz-animation: kiri 1.2s infinite linear;
-o-animation: kiri 1.2s infinite linear;
}
#splash span:nth-child(3) {
background: white;
z-index: 100;
}
#splash span:nth-child(4) {
background: white;
-webkit-animation: kanan 1.2s infinite linear;
-moz-animation: kanan 1.2s infinite linear;
-o-animation: kanan 1.2s infinite linear;
}
#-webkit-keyframes kanan {
0% {
-webkit-transform: translateX(20px);
}
50% {
-webkit-transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(20px);
z-index: 200;
}
}
#-moz-keyframes kanan {
0% {
-moz-transform: translateX(20px);
}
50% {
-moz-transform: translateX(-20px);
}
100% {
-moz-transform: translateX(20px);
z-index: 200;
}
}
#-o-keyframes kanan {
0% {
-o-transform: translateX(20px);
}
50% {
-o-transform: translateX(-20px);
}
100% {
-o-transform: translateX(20px);
z-index: 200;
}
}
#-webkit-keyframes kiri {
0% {
-webkit-transform: translateX(-20px);
z-index: 200;
}
50% {
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(-20px);
}
}
#-moz-keyframes kiri {
0% {
-moz-transform: translateX(-20px);
z-index: 200;
}
50% {
-moz-transform: translateX(20px);
}
100% {
-moz-transform: translateX(-20px);
}
}
#-o-keyframes kiri {
0% {
-o-transform: translateX(-20px);
z-index: 200;
}
50% {
-o-transform: translateX(20px);
}
100% {
-o-transform: translateX(-20px);
}
}
.n2j-loading-video {
width: 60px;
height: 60px;
margin: auto;
border-color: white transparent white transparent;
border-width: 5px;
border-style: solid;
animation: loading 1s ease infinite;
position: fixed;
border-radius: 50%;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body,
html {
width: 100%;
height: 100%;
}
.header1 {
text-align: center;
color: #f8f8f8;
}
.header-content>h1 {
font-size: 5rem;
font-family: sans-serif;
font-weight: 700;
margin: 0;
}
.header-content>h3 {
font-size: 3rem;
font-family: sans-serif;
font-weight: 400;
margin: 0;
}
.header-content {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.content-divider {
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
position: relative;
left: 0px;
right: 0px;
margin: 20px auto;
max-width: 70%;
}
.btn.outline {
background: none;
padding: 12px 22px;
}
.btn-primary.outline {
border: 2px solid #f8f8f8;
color: #f8f8f8;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open>.dropdown-toggle.btn-primary {
color: #f7ca18;
border-color: #f7ca18;
}
.btn-primary.outline:active,
.btn-primary.outline.active {
border-color: #f7ca18;
color: #f7ca18;
box-shadow: none;
}
ul.intro-social-buttons li {
padding-bottom: 10px;
}
<script>
setTimeout(function() {
document.getElementById('app').style['display'] = 'block';
document.getElementById('splash').style['display'] = 'none';
}, 3000);
</script>
<!--The script above is placed in head within my code-->
<body>
<div id="splash">
<div class='n2j-loading-video'></div>
</div>
<div id="app">
<div class="header1">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="header-content">
<h1 class="maintxt rotateInUpLeft animated">LIAM DOCHERTY</h1>
<h3 class="subtxt rotateInUpLeft animated">WEB DEVELOPER & GRAPHIC DESIGNER</h3>
<hr class="content-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Web Development Portfolio</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">GFX Design Portfolio</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">About Me</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Contact Me</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<script src="js/javascript.js"></script>
</body>
</html>
I've been struggling with this for the past few days, so help would be greatly appreciated. I have a Title with a line (hr element) right below it. I'm trying to have a div centered in the hr that grows and shrinks. However, when the css3 animation is applied it causes the div to be displaced down and to the right, as if the div's top-left point (which I think is (0,0)) is set to be where the middle was.
I've created a jsfiddle to illustrate what I mean.
Here's my html:
<div id="header">
<h1>Center</h1>
<div id="action-bar">
<hr class="center-line" />
<div class="circle animation"></div>
</div>
</div>
and my css:
div#header {
color: #000;
width: 90%;
text-align: center;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
div#header h1 {
font-size: 50px;
font-weight: 300;
margin-top: 0px;
margin-bottom: 0px;
}
/* the line beneath h1 */
div #action-bar {
margin: 25px 0;
position: relative;
}
div.circle {
width: 1em;
height: 1em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
div.circle:hover {
width: 2em;
height: 2em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
hr.center-line {
border: 0;
height: .25em;
background: #000;
}
/* animation */
#keyframes pulse {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes pulse {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
.animation {
animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-backface-visibility: hidden;
}
Can anybody point be in the right direction? I'm looking for a pure-css solution if possible. Thanks!
Add negative margin to your circle element, half of it's width and height:
div.circle {
width: 1em;
height: 1em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
margin-left: -0.5em;
margin-top: -0.5em;
}
div.circle:hover {
width: 2em;
height: 2em;
margin-left: -1em;
margin-top: -1em;
}
jsFiddle Demo.
Here is a smooth pulsing option.
http://jsfiddle.net/aLjsut5r/4/
/* animation */
#keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}
.animation {
animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-backface-visibility: hidden;
}
.pulsing {
border: 3px solid #999;
-webkit-border-radius: 30px;
height: 18px;
width: 18px;
position: absolute;
left:20px;
top:214px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.5, 0.5); opacity: 0.5;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.5;}
}
So i'm working on a kind of solar system page. what i try to do is when a person clicks on a planet it redirects them to page. But for some reason it doesn't work. It's like the anchor doesn't exist. i tried to animate the anchor tag with the image but that doesn't seem to work.
THE HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<!-- content to be placed inside <body>…</body> -->
<div id="one"><a id="aone" href="http://google.com"><img src="one.png"></a></div>
<div id="two"><img src="two.png"></div>
<div id="three"></div>
</body>
</html>
THE CSS
body{
position: absolute;
top: 50%; left: 50%;
margin: -150px;
border: dashed 1px;
width: 300px; height: 300px;
border-radius: 50%;
content: '';
}
#one {
text-align: center;
position: absolute;
top: 50%; left: 50%;
margin: -25px;
width: 50px; height: 50px;
animation: rot1 8s infinite linear;
-webkit-animation: rot1 8s infinite linear;
}
#-webkit-keyframes rot1 {
0% { -webkit-transform: rotate(0deg) translate(300px) rotate(0deg); }
100% { -webkit-transform: rotate(360deg) translate(300px) rotate(-360deg); }
}
#keyframes rot1 {
0% { transform: rotate(0deg) translate(300px) rotate(0deg); }
100% { transform: rotate(360deg) translate(300px) rotate(-360deg); }
}
#two {
text-align: center;
position: absolute;
top: 50%; left: 50%;
margin: -25px;
width: 50px; height: 50px;
transparent 49%, black 49%, black 51%, transparent 51%);
animation: rot2 34s infinite linear;
-webkit-animation: rot2 34s infinite linear;
}
#-webkit-keyframes rot2 {
0% { -webkit-transform: rotate(0deg) translate(150px) rotate(0deg); }
100% { -webkit-transform: rotate(360deg) translate(150px) rotate(-360deg); }
}
#keyframes rot2 {
0% { transform: rotate(0deg) translate(150px) rotate(0deg); }
100% { transform: rotate(360deg) translate(300px) rotate(-360deg); }
}
#three {
text-align: center;
position: absolute;
top: 50%; left: 50%;
margin: -25px;
width: 50px; height: 50px;
background:
linear-gradient(transparent 49%, black 49%, black 51%, transparent 51%),
rgba(0,0,255,.3) linear-gradient(90deg,
transparent 49%, black 49%, black 51%, transparent 51%);
animation: rot3 34s infinite linear;
-webkit-animation: rot3 34s infinite linear;
}
#-webkit-keyframes rot3 {
0% { -webkit-transform: rotate(0deg) translate(50px) rotate(0deg); }
100% { -webkit-transform: rotate(360deg) translate(50px) rotate(-360deg); }
}
#keyframes rot3 {
0% { transform: rotate(0deg) translate(50px) rotate(0deg); }
100% { transform: rotate(360deg) translate(50px) rotate(-360deg); }
}
http://jsfiddle.net/DJsU9/
I don't know if it's possible to move the real anchor position (not just the graphics position) using the CSS transform property but there's an incredibly easy solution for this question without the use of javascript:
You can create three invisible circles, put links on each one and then position them over the existing animation. This method is good because even if the user clicks in the wrong position the link will work.
Note that I've colored the circles with transparent red, but you can (and should) remove the color by deleting the background:rgba(255,0,0,0.5); lines.
Here's the relevant CSS:
.circle1{
display:block;
position:absolute;
top:50%;
margin-top:-325px;
left:50%;
margin-left:-325px;
width:650px;
height:650px;
background:rgba(255,0,0,0.5); /* unnecessary */
border-radius:100%;
}
.circle2{
display:block;
position:absolute;
top:50%;
margin-top:-175px;
left:50%;
margin-left:-175px;
width:350px;
height:350px;
background:rgba(255,0,0,0.5); /* unnecessary */
border-radius:100%;
}
HTML:
<div id="one"><a id="aone" href="http://google.com"><img src="http://dedobbelaere.sisamul.com/one.png"></a>
</div>
<div id="two"><a id="aone" href="http://google.com"><img src="http://dedobbelaere.sisamul.com/two.png"></a>
</div>
<div id="three"></div>
<a class="circle1" href="http://dedobbelaere.sisamul.com/two.png"></div>
<a class="circle2" href="http://google.com"></div>
JSFiddle
Only corrected sintax on nested html element, tested on IE10 and Chrome35(Windows 8 Pro), but probably you need to fix some platform/cross-browser issue.
Anyway you should set an unique id to your hyperlinks
http://jsfiddle.net/InferOn/DJsU9/11/
HTML
<div id="one">
<a id="aone" target="_blank" href="http://google.com">
<img src="http://dedobbelaere.sisamul.com/one.png"/>
</a>
</div>
<div id="two">
<a id="aone" target="_blank" href="http://google.com">
<img src="http://dedobbelaere.sisamul.com/two.png"/>
</a>
</div>
<div id="three"></div>
CSS
/**
* Prevent an element to rotate itself in a circular CSS3 animation
* http://stackoverflow.com/q/14057780/1397351
*/
a {
border: 1px solid red;
}
body {
position: absolute;
top: 50%;
left: 50%;
margin: -150px;
border: dashed 1px;
width: 300px;
height: 300px;
border-radius: 50%;
content:'';
}
#one {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin: -25px;
width: 50px;
height: 50px;
animation: rot1 8s infinite linear;
-webkit-animation: rot1 8s infinite linear;
}
#-webkit-keyframes rot1 {
0% {
-webkit-transform: rotate(0deg) translate(300px) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) translate(300px) rotate(-360deg);
}
}
#keyframes rot1 {
0% {
transform: rotate(0deg) translate(300px) rotate(0deg);
}
100% {
transform: rotate(360deg) translate(300px) rotate(-360deg);
}
}
#two {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin: -25px;
width: 50px;
height: 50px;
transparent 49%, black 49%, black 51%, transparent 51%);
animation: rot2 34s infinite linear;
-webkit-animation: rot2 34s infinite linear;
}
#-webkit-keyframes rot2 {
0% {
-webkit-transform: rotate(0deg) translate(150px) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) translate(150px) rotate(-360deg);
}
}
#keyframes rot2 {
0% {
transform: rotate(0deg) translate(150px) rotate(0deg);
}
100% {
transform: rotate(360deg) translate(300px) rotate(-360deg);
}
}
#three {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin: -25px;
width: 50px;
height: 50px;
background: linear-gradient(transparent 49%, black 49%, black 51%, transparent 51%), rgba(0, 0, 255, .3) linear-gradient(90deg, transparent 49%, black 49%, black 51%, transparent 51%);
animation: rot3 34s infinite linear;
-webkit-animation: rot3 34s infinite linear;
}
#-webkit-keyframes rot3 {
0% {
-webkit-transform: rotate(0deg) translate(50px) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) translate(50px) rotate(-360deg);
}
}
#keyframes rot3 {
0% {
transform: rotate(0deg) translate(50px) rotate(0deg);
}
100% {
transform: rotate(360deg) translate(50px) rotate(-360deg);
}
}