• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
147 wizyt
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ź

0 głosów
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.
 

komentarz 19 czerwca 2018 przez Chess Szeryf (76,710 p.)

Translate google, tłumaczy słowo transition m.inn. jako "przejście", czyli można to chyba interpretować jako "efekt przejścia".

Podobne pytania

+1 głos
1 odpowiedź 116 wizyt
pytanie zadane 18 listopada 2021 w JavaScript przez TOWaD Mądrala (5,700 p.)
0 głosów
2 odpowiedzi 371 wizyt
0 głosów
1 odpowiedź 157 wizyt
pytanie zadane 8 sierpnia 2020 w HTML i CSS przez Marak123 Stary wyjadacz (11,190 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...