I am a learning HTML/CSS. I have made two simple circles and a rotating element in between. Afterwards, I decided to use bootstrap for decorating subsequent elements. However, as soon as I include the link to bootstrap, the circles get distorted and the animation is ruined.
Also, if I remove the statement overflow: hidden, on re-sizing the browser, the scroll bar starts to behave erratically. If I let it be, I am not able to insert further content down the window.
Please help!
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
margin: 0%;
}
body {
background-color: #080808;
overflow: hidden;
}
#spinner,
#spinner:before,
#spinner:after {
position: absolute;
top: 50%;
left: 50%;
background: none;
border-radius: 50%;
border: 5px solid cyan;
}
#spinner {
height: 386px;
width: 386px;
margin: -208px;
border: 15px solid blue;
z-index: 1;
border-top: 15px solid red;
-webkit-animation: spin 1s ease-in-out infinite;
-moz-animation: spin 1s ease-in-out infinite;
-ms-animation: spin 1s ease-in-out infinite;
-o-animation: spin 1s ease-in-out infinite;
animation: spin 1s ease-in-out infinite;
}
#spinner:before {
content: "";
height: 372px;
width: 372px;
margin: -191px;
}
#spinner:after {
content: "";
width: 420px;
height: 420px;
margin: -215px;
}
#vline,
#hline,
#dline1,
#dline2 {
height: 420px;
position: absolute;
border-left: 1px solid cyan;
top: 50%;
left: 50%;
margin-top: -210px;
}
#hline {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#dline1 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#dline2 {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#keyframes "spin" {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes "spin" {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes "spin" {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes "spin" {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<title>Test</title>
</head>
<body>
<div id="spinner"></div>
<div id="vline"></div>
<div id="hline"></div>
<div id="dline1"></div>
<div id="dline2"></div>
</body>
</html>
Bootstrap sets box-sizing: border-box; on everything.
Set box-sizing: content-box; on elements and pseudo-elements in your spinner:
* {
margin: 0;
padding: 0;
}
.spinner-container *,
.spinner-container :after,
.spinner-container :before {
box-sizing: content-box;
}
html,
body {
height: 100%;
margin: 0%;
}
body {
background-color: #080808!important;
overflow: hidden;
}
#spinner,
#spinner:before,
#spinner:after {
position: absolute;
top: 50%;
left: 50%;
background: none;
border-radius: 50%;
border: 5px solid cyan;
}
#spinner {
height: 386px;
width: 386px;
margin: -208px;
border: 15px solid blue;
z-index: 1;
border-top: 15px solid red;
-webkit-animation: spin 1s ease-in-out infinite;
-moz-animation: spin 1s ease-in-out infinite;
-ms-animation: spin 1s ease-in-out infinite;
-o-animation: spin 1s ease-in-out infinite;
animation: spin 1s ease-in-out infinite;
}
#spinner:before {
content: "";
height: 372px;
width: 372px;
margin: -191px;
}
#spinner:after {
content: "";
width: 420px;
height: 420px;
margin: -215px;
}
#vline,
#hline,
#dline1,
#dline2 {
height: 420px;
position: absolute;
border-left: 1px solid cyan;
top: 50%;
left: 50%;
margin-top: -210px;
}
#hline {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#dline1 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#dline2 {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#keyframes "spin" {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes "spin" {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes "spin" {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes "spin" {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="spinner-container">
<div id="spinner"></div>
<div id="vline"></div>
<div id="hline"></div>
<div id="dline1"></div>
<div id="dline2"></div>
</div>
EDIT: Scrollbar appears erratic because your #spinner pushes body out while spinning. To solve this problem put everything in container, set container's width and height, position it in the center and set overflow:hidden; on it. Also, mind media-queries for cases when display is smaller than spinner:
* {
margin: 0;
padding: 0;
}
.spinner-container *,
.spinner-container :after,
.spinner-container :before {
box-sizing: content-box;
}
.spinner-container {
overflow: hidden;
height: 430px;
width: 430px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#media (max-height: 430px) {
.spinner-container {
transform: translate(-50%,0);
top: 0;
}
}
#media (max-width: 430px) {
.spinner-container {
transform: translate(0,-50%);
left: 0;
}
}
#media (max-height:430px) and (max-width: 430px) {
.spinner-container {
transform: none;
left: 0;
top: 0;
}
}
html,
body {
height: 100%;
margin: 0%;
}
body {
background-color: #080808!important;
}
#spinner,
#spinner:before,
#spinner:after {
position: absolute;
top: 50%;
left: 50%;
background: none;
border-radius: 50%;
border: 5px solid cyan;
}
#spinner {
height: 386px;
width: 386px;
margin: -208px;
border: 15px solid blue;
z-index: 1;
border-top: 15px solid red;
-webkit-animation: spin 1s ease-in-out infinite;
-moz-animation: spin 1s ease-in-out infinite;
-ms-animation: spin 1s ease-in-out infinite;
-o-animation: spin 1s ease-in-out infinite;
animation: spin 1s ease-in-out infinite;
}
#spinner:before {
content: "";
height: 372px;
width: 372px;
margin: -191px;
}
#spinner:after {
content: "";
width: 420px;
height: 420px;
margin: -215px;
}
#vline,
#hline,
#dline1,
#dline2 {
height: 420px;
position: absolute;
border-left: 1px solid cyan;
top: 50%;
left: 50%;
margin-top: -210px;
}
#hline {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#dline1 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#dline2 {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#keyframes "spin" {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes "spin" {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes "spin" {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes "spin" {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="spinner-container">
<div id="spinner"></div>
<div id="vline"></div>
<div id="hline"></div>
<div id="dline1"></div>
<div id="dline2"></div>
</div>
Related
first i must Apology for my bad English, i made it like this below code:
CSS:
#charset "utf-8";
#media screen and (min-width: 320px) {
body {
font-family:'BebasRegular';
text-align:center;
background-color: #d0d2d0;
background-image:url(../Image/Back_pattern.png);
width: 95%;
height: 95%;
margin:auto;
}
div#main {
font-size: 3vw;
}
#content {
margin:auto;
height:100vh;
width:100vw;
}
}
#font-face {
font-family: 'BebasRegular';
src: url('../Fonts/BEBAS___-webfont.eot');
src: url('../Fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/BEBAS___-webfont.woff') format('woff'),
url('../Fonts/BEBAS___-webfont.ttf') format('truetype'),
url('../Fonts/BEBAS___-webfont.svg#BebasRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#media only screen and (orientation: landscape) {
#item1_placeholder{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 7%;
content: "";
display: block;
padding-bottom: 7%;
}
#AHCube div {
position: absolute;
width: 7vw;
height: 7vw;
border: 1px solid rgba(0,0,0,0.3);
background: rgba(255,255,255,1);
box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
text-align: center;
line-height: 120px;
}
#AHCube .Front {
-webkit-transform: translateZ(3.5vw);
transform: translateZ(3.5vw);
-moz-transform: translateZ(3.5vw);
-o-transform: translateZ(3.5vw);
}
#AHCube .Right {
-webkit-transform: rotateY(90deg) translateZ(3.5vw);
transform: rotateY(90deg) translateZ(3.5vw);
-moz-transform: rotateY(90deg) translateZ(3.5vw);
-o-transform: rotateY(90deg) translateZ(3.5vw);
}
#AHCube .Top {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(3.5vw);
transform: rotateY(90deg) rotateX(90deg) translateZ(3.5vw);
-moz-transform: rotateY(90deg) rotateX(90deg) translateZ(3.5vw);
-o-transform: rotateY(90deg) rotateX(90deg) translateZ(3.5vw);
}
#AHCube .Back {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(3.5vw);
transform: rotateY(180deg) rotateZ(90deg) translateZ(3.5vw);
-moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(3.5vw);
-o-transform: rotateY(180deg) rotateZ(90deg) translateZ(3.5vw);
}
#AHCube .Left {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(3.5vw);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(3.5vw);
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(3.5vw);
-o-transform: rotateY(-90deg) rotateZ(90deg) translateZ(3.5vw);
}
#AHCube .Below {
-webkit-transform: rotateX(-90deg) translateZ(3.5vw);
transform: rotateX(-90deg) translateZ(3.5vw);
-moz-transform: rotateX(-90deg) translateZ(3.5vw);
-o-transform: rotateX(-90deg) translateZ(3.5vw);
background:rgba(3,76,244,1.00);
}
.AH_Ani1 {
-webkit-animation-name: spin1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 5s;
-webkit-animation-fill-mode: forwards;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 3.5vw 3.5vw 0;
animation-name: spin1;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-duration: 5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
transform-origin: 3.5vw 3.5vw 0;
-moz-animation-name: spin1;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
-moz-animation-duration: 5s;
-moz-animation-fill-mode: forwards;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 3.5vw 3.5vw 0;
-o-animation-name: spin1;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: 1;
-o-animation-duration: 5s;
-o-animation-fill-mode: forwards;
-o-transform-style: preserve-3d;
-o-transform-origin: 3.5vw 3.5vw 0;
}
.ICO_Hold1 {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(5% 5% 5% #222);
width: 80%;
height: auto;
display:block;
}
#-webkit-keyframes spin1 {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
0% { -webkit-transform:scale(0,0); }
10% { -webkit-transform:scale(1,1); }
28% { -webkit-transform: rotateY(-90deg); }
46% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
64% { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }
82% { -webkit-transform: rotateY(90deg) rotateX(90deg); }
100% { -webkit-transform: rotateX(90deg); }
}
#keyframes spin1 {
from,to { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
0% { transform:scale(0,0); }
10% { transform:scale(1,1); }
28% { transform: rotateY(-90deg); }
46% { transform: rotateY(-90deg) rotateZ(90deg); }
64% { transform: rotateY(-180deg) rotateZ(90deg); }
82% { transform: rotateY(90deg) rotateX(90deg); }
100% { transform: rotateX(90deg); }
}
#-moz-keyframes spin1 {
from,to { -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
0% { -moz-transform:scale(0,0); }
10% { -moz-transform:scale(1,1); }
28% { -moz-transform: rotateY(-90deg); }
46% { -moz-transform: rotateY(-90deg) rotateZ(90deg); }
64% { -moz-transform: rotateY(-180deg) rotateZ(90deg); }
82% { -moz-transform: rotateY(90deg) rotateX(90deg); }
100% { -moz-transform: rotateX(90deg); }
}
#-o-keyframes spin1 {
from,to { -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
0% { -o-transform:scale(0,0); }
10% { -o-transform:scale(1,1); }
28% { -o-transform: rotateY(-90deg); }
46% { -o-transform: rotateY(-90deg) rotateZ(90deg); }
64% { -o-transform: rotateY(-180deg) rotateZ(90deg); }
82% { -o-transform: rotateY(90deg) rotateX(90deg); }
100% { -o-transform: rotateX(90deg); }
}
}
#media only screen and (orientation: portrait) {
#item1_placeholder{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0%;
content: "";
display: block;
padding-bottom: 0%;
}
#AHCube div {
position: absolute;
width: 0vw;
height: 0vw;
border: 1px solid rgba(0,0,0,0.3);
background: rgba(255,255,255,1);
box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
text-align: center;
line-height: 120px;
}
.ICO_Hold1 {
position: fixed;
top: 0%;
left: 0%;
transform: translate(-50%, -50%);
-webkit-filter: drop-shadow(50% 50% 50% #222 );
filter: drop-shadow(5% 5% 5% #222);
width: 0%;
height: auto;
display:none;
}
}
HTML:
<div id="item1_placeholder" >
<div id="AHCube" class="AH_Ani1">
<div class="Front"><img class="ICO_Hold1" src="Image/1-1.png" /></div>
<div class="Right"><img class="ICO_Hold1" src="Image/1-2.png" /></div>
<div class="Top"><img class="ICO_Hold1" src="Image/1-3.png" /></div>
<div class="Back"><img class="ICO_Hold1" src="Image/1-4.png" /></div>
<div class="Left"><img class="ICO_Hold1" src="Image/1-5.png" /></div>
<div class="Below"><img class="ICO_Hold1" src="Image/1-6.png" /></div>
</div>
</div>
it work fine in chrome and Mozilla but it is not fine IE or Microsoft Edge, and i didn't check it in portable device
another problem is in portrait view , the cube's image background didn't hide in portrait view.
can any one check this and hint me to correct/fix this please?
Here is my CSS and HTML code:
.route-list {
padding: 0;
margin: 0;
color: #fff;
text-align: center;
padding: 6px 9px 7px;
background: #0097d6;
}
.plane-icon-wrapper {
display: inline-block;
width: 100px;
margin: 0 12px 0 10px;
position: relative;
}
.plane-icon {
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
-moz-animation: plane 5s infinite;
-o-animation: plane 5s infinite;
-webkit-animation: plane 5s infinite;
animation: plane 5s infinite;
position: absolute;
top: -12px;
margin-right: -10px;
padding: 0;
}
#-webkit-keyframes plane {
0% {
right: 0px;
opacity: 0;
}
25% {
right: 100%;
opacity: 1;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
50% {
right: 100%;
opacity: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
75% {
right: 0;
opacity: 1;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
100% {
right: 0;
opacity: 0;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#keyframes plane {
0% {
right: 0px;
opacity: 0;
}
25% {
right: 100%;
opacity: 1;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
50% {
right: 100%;
opacity: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
75% {
right: 0;
opacity: 1;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
100% {
right: 0;
opacity: 0;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
}
.route-list span + span:before {
font-size: 16px;
line-height: 20px;
display: inline-block;
vertical-align: top;
content: "\f072";
font-family: "FontAwesome";
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
-moz-animation: plane 5s infinite;
-o-animation: plane 5s infinite;
-webkit-animation: plane 5s infinite;
animation: plane 5s infinite;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="screen" />
<ul class="list-inline route-list same-height-right" style="height: 33px;">
Manila
<span class="plane-icon-wrapper"><i class="fa fa-plane plane-icon"></i></span>
<span>Kuala Lumpur</span>
<span>Singapore</span>
<span>Bali</span>
</ul>
I tried to solve margin between before, but it seems there's something that I can't fix it correctly.
I want to make it in same line, and auto width between cities and plane icon animated.
How to make in same line and auto width between cities? ((SAME LINE))
I'm also using bootstrap css, how to solve it even in mobile view small screen sizes?
Here is what I want :
1: single line 2: responsive 3: auto width between cities 4: fixed
width in even in narrow size, texts will be resized based on
width. so how to make it?
Thanks in advance
I successfully created a cube in a cube, a Tesseract. But for some reason I really can't explain, the cube is moving downwards while the Animation is going on.
If you watch the scrolling bar of your browser, the entire cube is moving downwards.
And yes, of course you can "ignore" this problem by changing the margin of the parent-div-element but that doesn't solve it.
#-webkit-keyframes cube-spin {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
#keyframes cube-spin {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
#-webkit-keyframes counter-rot {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
#keyframes counter-rot {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.cube-wrap {
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 0%;
perspective-origin: 50% 0%;
}
.outer {
width: 300px !important;
}
.cube {
position: relative;
width: 200px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: cube-spin 8s infinite linear;
animation: cube-spin 8s infinite linear;
}
.backendtext {
position: absolute;
width: 200px;
font-size: 35px;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
-webkit-animation: counter-rot 8s infinite linear;
animation: counter-rot 8s infinite linear;
}
.outer div {
width: 300px;
height: 300px;
background: rgba(255, 116, 0, 0.1);
line-height: 530px;
}
.inner div {
width: 200px;
height: 200px;
background: rgba(153, 69, 0, 0.7);
}
.cube div {
position: absolute;
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
font-size: 35px;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
}
.depth div.front-pane {
-webkit-transform: translateY(-100px) translateZ(100px);
transform: translateY(-100px) translateZ(100px);
}
.outer.depth div.front-pane {
-webkit-transform: translateY(-150px) translateZ(150px);
transform: translateY(-150px) translateZ(150px);
}
.depth div.back-pane {
-webkit-transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
}
.outer.depth div.back-pane {
-webkit-transform: translateY(-150px) translateZ(-150px) rotateY(180deg);
transform: translateY(-150px) translateZ(-150px) rotateY(180deg);
}
.depth div.left-pane {
-webkit-transform: translateY(-100px) translateX(100px) rotateY(-270deg);
transform: translateY(-100px) translateX(100px) rotateY(-270deg);
}
.outer.depth div.left-pane {
-webkit-transform: translateY(-150px) translateX(150px) rotateY(-270deg);
transform: translateY(-150px) translateX(150px) rotateY(-270deg);
}
.depth div.right-pane {
-webkit-transform: translateY(-100px) translateX(-100px) rotateY(270deg);
transform: translateY(-100px) translateX(-100px) rotateY(270deg);
}
.outer.depth div.right-pane {
-webkit-transform: translateY(-150px) translateX(-150px) rotateY(270deg);
transform: translateY(-150px) translateX(-150px) rotateY(270deg);
}
.depth div.top-pane {
-webkit-transform: translateY(-200px) rotateX(-90deg);
transform: translateY(-200px) rotateX(-90deg);
}
.outer.depth div.top-pane {
-webkit-transform: translateY(-300px) rotateX(-90deg);
transform: translateY(-300px) rotateX(-90deg);
}
.depth div.bottom-pane {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
<div style="height: 300px; margin-top: 400px;">
<div class="cube-wrap">
<div class="cube depth inner">
<a class="backendtext">Backend</a>
<div class="front-pane"></div>
<div class="back-pane"></div>
<div class="top-pane"></div>
<div class="bottom-pane"></div>
<div class="left-pane"></div>
<div class="right-pane"></div>
</div>
<div class="cube depth outer">
<div class="front-pane">Frontend</div>
<div class="back-pane">Frontend</div>
<div class="top-pane"></div>
<div class="bottom-pane"></div>
<div class="left-pane">Frontend</div>
<div class="right-pane">Frontend</div>
</div>
</div>
//EDIT: Works fine on Chrome and Edge. Will try to add prefixes to everything and see if it solves the problem.
//EDIT2: Added Prefixes, still doesn't work on Firefox but does properly on Chrome, Edge etc.
//EDIT3: Set Overflow of the cube-wrapper to hidden but I would still love to know the reason.
This question already has an answer here:
How do I make Sass work?
(1 answer)
Closed 7 years ago.
I am trying to animate an arrow downwards to indicate scroll down in a parallex site.
I have got this code from Codepen.
See working demo here : CodePen arrow animation
I am exactly using the same code on my site but it does not animate.
The arrow shows up but it does not animate.
What I am doing wrong?
HTML:
<div class="encircle bounce animated">
<div class="arrow">
</div>
</div>
CSS:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#-ms-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
#mixin animation($animation) {
-webkit-animation: #{$animation};
-moz-animation: #{$animation};
-ms-animation: #{$animation};
animation: #{$animation};
}
#mixin transform($transform) {
-webkit-transform: $transform;
-moz-transform: $transform;
-ms-transform: $transform;
transform: $transform;
}
#include keyframes(bounce) {
0%, 20%, 50%, 80%, 100% {
#include transform(translateY(0));
}
40% {
#include transform(translateY(-20px));
}
60% {
#include transform(translateY(-10px));
}
}
body {
background: black;
}
.encircle {
width:60px;
height:60px;
border-radius:60px;
border: solid 2px white;
position: fixed;
bottom: 0;
left: 50%;
}
.arrow {
margin:0 auto;
margin-top: 13px;
width: 30px;
height: 30px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
#include animation(bounce 2s infinite);
}
You have SASS source code and it'll not work for you if you just include it like a css file. you need a SASS pre-compiler or use directly the generated css
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
body {
background: black;
}
.encircle {
width: 60px;
height: 60px;
border-radius: 60px;
border: solid 2px white;
position: fixed;
bottom: 0;
left: 50%;
}
.arrow {
margin: 0 auto;
margin-top: 13px;
width: 30px;
height: 30px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-ms-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
to read more about SASS
Can someone please tell me why my paragraph text at the bottom is not displaying all my text in my div. If I need to send screenshots please let me know.
/* Main */
.main {
position: relative;
margin: 0;
overflow-x:hidden;
}
.main.fullscreen {
height: 100%;
}
.main.style1 {
text-align: center;
padding: 3em 0 3em 0;
}
.main.style1 h2 {
font-size: 4.25em;
line-height: 1em;
letter-spacing: -4px;
}
.main.style1:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.main.style1 .content {
opacity: 1.0;
display: inline-block;
vertical-align: middle;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.main.style1.inactive {
}
.main.style1.inactive .content {
opacity: 0;
}
.main.style2 {
padding: 3em 0 3em 0;
overflow: hidden;
}
.main.style2 .content {
position: relative;
width: 35%;
display: inline-block;
vertical-align: middle;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
visibility: visible;
}
.main.style2.left {
}
.main.style2.left:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.main.style2.left .content {
left: 0;
}
.main.style2.right {
}
.main.style2.right:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.main.style2.right .content {
left: 65%;
}
.main.style2.inactive {
}
.main.style2.inactive .content {
}
.main.style2.inactive.left .content {
left: -35%;
}
.main.style2.inactive.right .content {
left: 100%;
}
.main.style3 {
text-align: center;
padding: 6em 0 6em 0;
}
.main.style3 .content {
}
.main.style3 .content > header {
margin-bottom: 2em;
}
.main.style3.primary {
background: #fff;
}
.main.style3.secondary {
background: #f5f6f7;
}
/* Dark */
.dark {
color: #fff;
}
.dark a {
color: #fff;
}
.dark .button.style2 {
border-color: inherit;
background-color: rgba(64,64,64,0.05);
}
.dark .button.style2:hover {
background-color: rgba(255,255,255,0.1);
}
.dark .button.style2.down {
background-image: url('images/dark-arrow.svg');
}
/*********************************************************************************/
/* Spinner */
/*********************************************************************************/
#-moz-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
#-webkit-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
#-o-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
#-ms-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
#keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
/*********************************************************************************/
/* Loader */
/*********************************************************************************/
#-moz-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
#-webkit-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
#-o-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
#-ms-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
#keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
#-moz-keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
#-webkit-keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
#-o-keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
#-ms-keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
#keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
#-moz-keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
#-webkit-keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
#-o-keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
#-ms-keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
#keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
body {
text-decoration: none;
}
body:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
body:before {
-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
-o-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
color: #ececec;
content: '\f1ce';
cursor: default;
display: block;
font-size: 2em;
height: 2em;
left: 50%;
line-height: 2em;
margin: -1em 0 0 -1em;
opacity: 0;
position: fixed;
text-align: center;
top: 50%;
width: 2em;
z-index: -1;
}
body:after {
-moz-animation: overlay-hide 1.5s ease-in forwards !important;
-webkit-animation: overlay-hide 1.5s ease-in forwards !important;
-o-animation: overlay-hide 1.5s ease-in forwards !important;
-ms-animation: overlay-hide 1.5s ease-in forwards !important;
animation: overlay-hide 1.5s ease-in forwards !important;
background: #ffffff;
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
body.is-loading:before {
-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
-o-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
z-index: 100001;
}
body.is-loading:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
opacity: 1;
z-index: 100000;
}
#media (-webkit-min-device-pixel-ratio: 2) {
body:before {
line-height: 2.025em;
}
}
/*********************************************************************************/
/* Icons */
/*********************************************************************************/
.icon {
text-decoration: none;
}
.icon:before {
display: inline-block;
font-family: FontAwesome;
font-size: 1.25em;
text-decoration: none;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.icon > .label {
display: none;
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header {
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
background: #fff;
background: rgba(255,255,255,0.95);
height: 3em;
line-height: 3em;
box-shadow: 0 0 0.15em 0 rgba(0,0,0,0.1);
}
body {
padding-top: 3em;
}
#logo {
position: absolute;
left: 1em;
top: 0;
height: 3em;
line-height: 3em;
letter-spacing: -1px;
}
#logo a {
font-size: 1.25em;
}
#nav {
position: absolute;
right: 0.5em;
top: 0;
height: 3em;
line-height: 3em;
}
#nav ul {
margin: 0;
}
#nav ul li {
display: inline-block;
margin-left: 0.5em;
font-size: 0.9em;
}
#nav ul li a {
display: block;
color: inherit;
text-decoration: none;
height: 3em;
line-height: 3em;
padding: 0 0.5em 0 0.5em;
outline: 0;
}
/*********************************************************************************/
/* Intro */
/*********************************************************************************/
#intro {
background: url('images/overlay.png'), url('../images/intro.jpg');
background-size: 256px 256px, cover;
background-attachment: fixed, fixed;
background-position: top left, bottom center;
background-repeat: repeat, no-repeat;
}
/*********************************************************************************/
/* One */
/*********************************************************************************/
#one {
background: url('images/overlay.png'), url('../images/one.jpg');
background-size: 256px 256px, cover;
overflow:auto
background-attachment: fixed, fixed;
background-position: top left, center center;
}
/*********************************************************************************/
/* Two */
/*********************************************************************************/
#two {
background: url('images/overlay.png'), url('../images/two.jpg');
background-size: 256px 256px, cover;
background-attachment: fixed, fixed;
background-position: top left, center center;
}
/*********************************************************************************/
/* Three */
/*********************************************************************************/
#three {
background: url('images/overlay.png'), url('../images/three.jpg');
background-size: 256px 256px, cover;
background-attachment: fixed, fixed;
background-position: top left, center center;
}
/*********************************************************************************/
/* Four */
/*********************************************************************************/
#four {
background: url('images/overlay.png'), url('../images/.jpg');
background-size: 256px 256px, cover;
background-attachment: scroll
background-position: top left, center center;
}
/*********************************************************************************/
/* Contact */
/*********************************************************************************/
#contact {
padding-bottom: 0;
overflow: hidden;
}
#contact .box {
position: relative;
bottom: 0;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
#contact.inactive {
}
#contact.inactive .box {
bottom: -30em;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer {
position: relative;
height: 5em;
line-height: 5em;
margin: 0;
background: #39454b;
color: #999;
color: rgba(185,186,187,0.5);
overflow: hidden;
}
#footer a {
color: #999;
color: rgba(185,186,187,0.5);
}
#footer a:hover {
color: #bbb;
color: rgba(185,186,187,1.0);
}
#footer .actions {
position: absolute;
left: 1em;
top: 0.25em;
height: 5em;
line-height: 5em;
margin: 0;
}
#footer .actions li {
font-size: 1.25em;
margin: 0;
}
#footer .actions li a {
padding: 0.5em;
}
#footer .menu {
position: absolute;
right: 2em;
top: 0;
height: 5em;
line-height: 5em;
margin: 0;
}
#footer .menu li {
font-size: 0.9em;
}
<!DOCTYPE HTML>
<html>
<head>
<title>IJDKY</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<script src="js/jquery.scrollex.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
<link rel="stylesheet" href="css/style-normal.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body>
<!-- Header -->
<header id="header">
<!-- Logo -->
<h1 id="logo">IJDKY</h1>
</header>
<!-- Intro -->
<section id="intro" class="main style1 dark fullscreen">
<div class="content container 75%">
<header>
<h2>Jasmine's Blog</h2>
</header>
<p>Welcome to <strong>My Blog</strong>. To continue click on the arrow and <strong>ENJOY!</strong></p>
<footer>
Next
</footer>
</div>
</section>
<!-- One -->
<section id="one" class="main style2 right dark fullscreen">
<div class="content box style2">
<header>
<h2>One</h2>
</header>
*<p>
Over four years ago....
<br>
I met the love of my life unknowingly to me. The night was crazy me and two of my best girlfriends had gone out to our favorite hometown spot, I just getting over a major breakup needed to get out and I might of had a couple of shots so my mouth was alittle liberal with the things that came out of my mouth.
</p>
<p>
My girlfriend and cousin Courtney was the one who noticed this gentleman across the room staring at me ever so thirsty like(insider), after about an hour of playing peekaboo with my eyes he mustard up the courage to come over and I expecting something superficial and arrogant this handsome man says to me HELLO my name is Quan and I think you are the most beautiful woman I have ever seen. I was taken back and a little tipsy so what came out of my mouth was a lot arrogant and straight forward I replied what do u have to offer me? He with no hesitation said if u give me a chance to take you out I will show u can I have ur number? I said sure but if u can't call me by Wednesday don't bother wasting your time he said of course.
</p>
<p>
He is going to say I told u so when he gets to this part I knew he wasn't going to call because I gave him the wrong number little did I know this was only the beginning of our story!!! The moral of this story in life you never know who you will encounter and what that person will be in your life sometimes you have to just JUMP and take a chance.
<br>
<strong style="right:inherit">Signed,
-Not Yet Jasmine Lynch</strong>
</p>*
</div>
Next
</section>
</body>
</html>
You have css issues For example .dark {color: #fff;} sets the text as white and since background is also white its not showing
try change .dark {color: #fff;} to .dark {color: #ccc;} you will see difference
do this for all css selectors