Scribd Logo
Upload

Welcome to Scribd!

  • Boomer Tu

    Uploaded by

    Benny Bav
    26 views6 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    26 views6 pages

    Boomer Tu

    Uploaded by

    Benny Bav

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    <!

    DOCTYPE html>

    <html>

    <head>

    <style>

    #myDIV {

    width: 100px;

    height: 100px;

    background-color: coral;

    color: green;

    position: absolute;

    animation: mymove 5s infinite;

    clip: rect(0,100px,100px,0);

    @keyframes mymove {

    50% {clip: rect(0,50px,50px,0);}

    </style>

    </head>

    <body>

    <h1>Animation of clip</h1>

    <div id="myDIV">

    <h1>myDIV</h1>

    </div>

    </body>

    </html>
    Animation of opacity
    The opacity property is animatable in CSS.

    Change the opacity of the blue DIV element from 1 to 0, and back to 1:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    #myDIV {

    position: absolute;

    top: 200px;

    width: 300px;

    height: 150px;

    background-color: lightblue;

    border: 1px solid black;

    animation: mymove 5s infinite;

    #DIV2 {

    position: absolute;

    top: 180px;

    left: 30px;

    width: 300px;

    height: 150px;

    background-color: coral;

    border: 1px solid black;

    @keyframes mymove {

    50% {opacity: 0;}


    }

    </style>

    </head>

    <body>

    <h1>Animation of opacity</h1>

    <p>The opacity property is <em>animatable</em> in CSS.</p>

    <p>Change the opacity of the blue DIV element from 1 to 0, and back to 1:<p>

    <div id="DIV2">

    <h1>Voila!</h1>

    </div>

    <div id="myDIV">

    </div>

    </body>

    </html>

    Animation of font-size
    Gradually change the font-size of the text:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    #myDIV {

    border: 1px solid black;


    width: 400px;

    height: 100px;

    animation: mymove 5s infinite;

    @keyframes mymove {

    50% {font-size: 40px;}

    </style>

    </head>

    <body>

    <h1>Animation of font-size</h1>

    <p>Gradually change the font-size of the text:<p>

    <div id="myDIV">

    <p>This is a paragraph</p>

    </div>

    </body>

    </html>

    Animation of word-spacing
    Gradually change the word-spacing of the div element from "normal" to 50px, and
    back to "normal":

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    #myDIV {

    border: 1px solid black;


    animation: mymove 5s infinite;

    @keyframes mymove {

    50% {word-spacing: 50px;}

    </style>

    </head>

    <body>

    <h1>Animation of word-spacing</h1>

    <p>Gradually change the word-spacing of the div element from "normal" to 50px, and back to
    "normal":<p>

    <div id="myDIV">

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
    tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
    iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
    facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
    nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem
    insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores
    legere me lius quod ii legunt saepius.

    </div>

    </body>

    </html>

    Animation of vertical-align
    Gradually change the vertical-align property of the image element from 0 to 100px,
    and back to 0:

    <!DOCTYPE html>
    <html>

    <head>

    <style>

    #myIMG {

    vertical-align: 50px;

    animation: mymove 5s infinite;

    @keyframes mymove {

    50% {vertical-align: 100px;}

    </style>

    </head>

    <body>

    <h1>Animation of vertical-align</h1>

    <p>Gradually change the vertical-align property of the image element from 0 to 100px, and back to
    0:<p>

    <p><img id="myIMG" src="smiley.gif" width="32" height="32">

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
    tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
    iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
    facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
    nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem
    insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores
    legere me lius quod ii legunt saepius.

    </p>

    </body>

    </html>

    You might also like