CSS3 animatsioonid – Üleminekute loomine (Harjutus 1)

CSS3 loodavad animatsioonid võiks jagada kaheks:

  1. üleminekud (transitions)
  2. animatsioon (animation)

Ülemineku puhul on tegemist CSS atribuudi siirdega ühest väärtusest teise. Näiteks, kui hiirega üle pildi liikuda, siis muutub see läbipaistvast olekust selgeks. Või kui liikuda üle nupu, siis selle värv mitte ei vahetu, vaid muutub sujuvalt ühest olekust teise.

Ettevalmistus

Alustame lihtsast dokumendist kolme nupuga (html).

<!DOCTYPE html>
<html lang="et">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS animatsioonid</title>
    <link rel="stylesheet" href="01.css">
    <link rel="stylesheet" href="normalize.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="main">
	<div id="content">
		<h1>CSS üleminekud <i>(transitions)</i></h1>
		   <a href="#" class="button icon1">Nupp1</a>
           <a href="#" class="button icon2">Nupp2</a>
           <a href="#" class="button icon3">Nupp3</a>
    </div>
</div>
</body>
</html>

Ja vormindamine CSS’is. Kasutame nupu ikoonidena FontAwsome fonti. Kuna ma ametlikult veebilehelt soovitud fondi CSS väärtusi ei leidnud, siis kasutan aadressi: http://astronautweb.co/snippet/font-awesome/

html{
    background-color: #34495e;
    width: 100%;
}

h1{ color: #f1c40f; }

a{ text-decoration: none; }

#content{
    width: 60%;
    margin: auto;
}

.button{
    display: inline-block;
	font-size: 0px;
	margin: 15px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	text-align: center;
	position: relative;
    background: rgba(236, 240, 241, 0.1);
    color: rgba(236, 240, 241, 0.3);
}

.button:before{
	font-family: FontAwesome;
	font-size: 40px;
	line-height: 90px;
}

.icon1:before{
	content: "\f130";
}

.icon2:before{
	content: "\f135";
}

.icon3:before{
	content: "\f140";
}

Tulemus hetkel selline:

Ülemineku animatsiooni loomine

Valime välja, millist CSS atribuudi väärtust soovime animeerida ja kui pikalt see peaks kestma (sekundites).

.button{
    display: inline-block;
	font-size: 0px;
	margin: 15px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	text-align: center;
	position: relative;
    background: rgba(236, 240, 241, 0.1);
    color: rgba(236, 240, 241, 0.3);
    
    transition-property: color;
    transition-duration: 0.5s;
}

Järgmisks on vaja leida käivitaja, millele animatsioon reageeriks. Sellekss sobivad CSS pseudo-klassi selektorid:

  • :hover
  • :focus
  • :active
  • :target

Valimegi näiteks  :hover ja määrame ära atribuudi väärtuse, milleni peab animatsioon kestma.

.button:hover{
    color: rgba(236, 240, 241, 1.0);
}

Meil toimub animatsioon nupu värvi läbipaistvuse osaga.

Kui oleksime muutnud ära värvi väärtuse, siis oleks ka see toimunud animeerituna. Päris kõiki atribuute ei ole võimalik animeerida. Mõned populaarsemad:

  • background-color
  • background-position
  • border-color
  • border-width
  • border-spacing
  • bottom
  • color
  • font-size
  • font-weight
  • height
  • left
  • letter-spacing
  • line-height
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline-color
  • outline-offset
  • outline-width
  • padding
  • right
  • text-indent
  • text-shadow
  • top
  • visibility
  • width
  • word-spacing
  • z-index

Teised veebilehitsejad

CSS3  tehnoloogia on päris uus ja teatud atribuudid ei pruugi teatud veebilehitseja versioonidega ühilduda. Selle parendamiseks kasutatakse veebilehitsejate eesliideseid (vendor prefixes)

    -webkit-transition-property: color;
    -moz-transition-property: color;
    -ms-transition-property: color;
    -o-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;

Kasutan ise viimaseid versioone tarkvarast ning kogu kood töötab eesliideseta. Et konspekt tuleks natuke selgem ja lühem, siis jätan näidetest need välja. Kuid ikka rõhutan, et lõpptoodangus peaks need alati olemas olema.

Ajastuse muutmine

Looduses ei hakka ega lõppe ükski liikumine äkitselt. See tähendab, et ka animtsioon peaks hakkama kiirenduse või aeglustusega. Kasutame selleks atribuuti transition-timing-function ja väärtus ease.

transition-timing-function: ease;

Seda ease ajastust illustreerib eknasti järgmine graafik:

Sarnaselt ease ajastusega käituvad ease-out ja ease-in, mis vastavalt ainutl kiirendavad alguses või aeglustavad lõpus.

Lineaarse liikumise tagab väärtus linear.

Kokku on  erinevaid ajastamise väärtusi 9. Kui liikumine läheb lõpuks keerulisemaks, siis tuleb piiluda cubic-bezier(x1, y1, x2, y2) väärtuse poole. Mugava tööriista vastavate kordinaatide tekitamsieks leiad aadressilt www.roblaplaca.com.

Ülemineku animatsioon mitme parameetriga

Nagu pealkirjast selgub, ei pea me piirduma ainult ühe animatsiooniga. Soovides animeerida mitut atribuuti tuleb need eraldada vaid komaga. Kui ma animatsiooni kestvusele ja ajastule midagi juurde ei lisa, siis kasutatakse sama väärtust mõlema animatsiooni puhul.

.button{
    display: inline-block;
	font-size: 0px;
	margin: 15px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	text-align: center;
	position: relative;
    background: rgba(236, 240, 241, 0.1);
    color: rgba(236, 240, 241, 0.3);

    transition-property: background, color;
    transition-duration: 0.5s;
    transition-timing-function: ease;
}

.button:hover{
    background: rgba(236, 240, 241, 1.0);
    color: rgba(52, 73, 94, 1.0);
}

Ülemineku animatsiooni lühikood

Ülemineku koodi saab kiiresti luua ühe atrbuudi transition abil.

transition: color 0.5s ease;

Ja kui on vaja jälle mitut väärtust animeerida, siis eralda lihtsalt komaga.

transition: color 0.5s ease, background 0.5s ease;

Ja kui veel koodi lühendada, siis selle asemel, et kõik soovitud atribuudid välja kirjutada, kasutame sõna all.

transition: all 0.5s ease;

Harjutus 1

  • Loo vastavalt konspektile oma kolm nuppu ning loo kaks ülemineku animatsiooni, kui hiirega üle nuppude lohistad. Animatsioonina võid kasutada samuti tausta ja teksti värve
  • Loo dokumenti otsingukast
    <h1>Otsingukast</h1>
    <input type="text" class="search" placeholder="Otsi...">
    

    Kujunda CSS’is

    .search{
        width: 100px;
        border: 1px solid #ccc;
        background: #f5f5f5;
        padding: 5px;
    }
    
  • Loo otingukastile animatsioon, kus hiirega otsingukasti klikkides, muutub otsingukast suuremaks (näiteks 200px). Selle animatsiooni aktiveerimiseks kasuta pseudoelementi :focus

 

Viimased postitused

Meist

metshein.com on pakkunud juba üle kümne aasta tasuta eestikeelseid infotehnoloogiaga seotud kursusi. Sama kurssi püütakse järgida ka edaspidi. Eesmärk muuta arvutiõpe võimalikult lihtsaks!

metshein.com: parim eestikeelne koolitusportaal

Autorist ja kontakt: kliki siia

Kontrolli tunnistust

Tööribale