Jak zrobić animację na przykład transform: scale(1,1) z scale(0,0)

pytanie zadane 19 czerwca 2018 w JavaScript przez DariuszH Gaduła (3,100 p.)

<!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 ???

komentarz 19 czerwca 2018 przez Kuba Jakubowski Gaduła (3,550 p.)

Musisz to zrobic w JS?

komentarz 19 czerwca 2018 przez DariuszH Gaduła (3,100 p.)

Tak, ponieważ chcę się nauczyć DOM Javascript :)

komentarz 19 czerwca 2018 przez Kuba Jakubowski Gaduła (3,550 p.)

Jaki efekt chcesz uzyskać?

komentarz 20 czerwca 2018 przez DariuszH Gaduła (3,100 p.)

Dowolny. Kod mi nie działa w ogóle a piszę na komórce na apce anwritter. CSS i HTML działa

1 odpowiedź

odpowiedź 19 czerwca 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Setimeout dodaje opóżnienie. Nie efekt tranzycji (tak to jest po polsku...transition?. Choć to można ogarnąć w samym CSS. Jednakże, jeżeli chcesz się takie rzeczy bawić to po pierwsze musisz sam napisać metodę która będzie to kalkulowała(chyba, że użyjesz jQ) a następnie anomimowała podczas wywołowania jednej kratki (animationFrameRequest) przekazać jej co ma wykonać. Przykład:

this.renderLeft = function(){ //Renderuj elementy, ktorych nie ma podczas scrolla
      if (this.startAPP){ //czy slider startuje
          if (this.isMaxRect() || this.isLifeSpanAPITooLong() ){ // osiagnieto max albo sie zj2#@#!
            this.stopAPP();
            return;
          }
        this.scrollLeft(); 
        ++this.lifeSpanAPI;
        window.requestAnimationFrame(()=>{this.renderLeft();});
        return; //Przerwanie wykonania animacji
        }
      else if (this.isMaxCurrentFrame() || this.isZeroPosX()){
        this.stopAPP();
        return;
      }
      this.scrollLeft();
        window.requestAnimationFrame(()=>{this.renderLeft();}); //Callback
    };

Możesz również na setTimeout na 16ms, jeżeli to będzie dla ciebie za trudne.