<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script>
<script src="index.js"></script>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Mukta+Mahee" rel="stylesheet">
</head>
<body>
<div id="header" >
<div class="about_me">DARIUSZ HOZER </div>
</div>
<div class="main" >
<div class="cross_fit" >CrossFit</div>
<div class="planet" >planet</div>
</div>
</body>
</html>
body{
width:100%;
height:500vh;
margin:0;
background-color: black;
}
#header{
position:fixed;
width:100%;
height:5vh;
background-color:black;
z-index: 100;
}
.about_me{
width:15%;
height:4.8vh;
text-align: right;
padding-right:1.9vh;
line-height: 5vh;
float: right;
background-color: rgb(12, 8, 8);
font-size:3vh;
font-family: Quicksand;
border-bottom: 0.1vh solid black;
transition: height 0.5s,width 0.5s;
color:white;
}
.cross_fit{
color:white;
font-size:22vh;
font-family: 'Quicksand';
letter-spacing: 1vh;
word-spacing: -1vh;
line-height: 80vh;
text-align: center;
position: absolute;
width:100%;
height:auto;
animation:cross 1s forwards;
}
@font-face
{
font-family: Quicksand;
src:url(font.ttf);
}
@keyframes cross{
0%{opacity:0;}
100%{opacity:1;}
}
.planet{
color:white;
font-family: 'Quicksand';
letter-spacing: 1vh;
font-size: 0vh;
transform: scale(1,1);
animation:planeta 0.51s forwards;
position: absolute;
width: 100%;
top:47vh;
}
@font-face
{
font-family: Quicksand;
src:url(font.ttf);
}
@keyframes planeta{
0% {text-align:center;transform: scale(0,0);font-size:0vh;}
100%{text-align: center;transform: scale(1,1);font-size:16vh;}
}
function myFunction(){
document.querySelector('.planet').style.color="yellow";
}
setTimeout(myFunction, 1000);
Funkcja zmienia po 1s kolor z białego na żółty. Gdy próbuję dodać na przyklad skalowanie czy rotację, to nie działa. Działa tylko zmiana koloru. Dlaczego tak jest ???