Css Transitions & Animations

Transitions  er effekter som lar et element gradvis endre seg fra en stil til en annen.

For å gjøre dette må du spesifisere to ting, css elementet du ønsker å legge denne effekten til og lengden på effekten

 

Se kode:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */

transition: width 2s, height 2s, transform 2s;

}

 

div:hover {

width: 200px;

height: 200px;

-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */

transform: rotate(180deg);

}

</style>

</head>

<body>

 

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

 

<div>Hover over me to see the transition effect!</div>

 

</body>

</html>


Animations

Animation er en effekt som lar et element gradvis endre seg fra en stil til en annen. Du kan endre så mange egenskaper du vill så mange ganger du vill, og du kan spesifisere når endringene vill skje ved hjelp av %.

se kode:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */

animation: myfirst 5s;

}

 

/* Chrome, Safari, Opera */

@-webkit-keyframes myfirst {

0%   {background: red;}

25%  {background: yellow;}

50%  {background: blue;}

100% {background: green;}

}

 

/* Standard syntax */

@keyframes myfirst {

0%   {background: red;}

25%  {background: yellow;}

50%  {background: blue;}

100% {background: green;}

}

</style>

</head>

<body>

 

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>

 

<div></div>

 

</body>

</html>

 

Eksempel sider:

Animation: https://minerva.hivolda.no/~caroliso/mid131/css/cssoppgave3/animation.html

Trasistion: https://minerva.hivolda.no/~caroliso/mid131/css/cssoppgave3/trasistion.html

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>