Scribd Logo
Upload

Welcome to Scribd!

  • Webkit

    Uploaded by

    Rosales Sandy
    10 views6 pages
    The document defines keyframe animations for pulse and dos. The pulse animation changes the box shadow at 0% and 100%. The dos animation changes properties like background color, rotation, font size, and color over 0-100% with different values at 0%, 50%, and 100%. It also defines the animation for different browser prefixes. Finally, it sets properties for the div tag for a background image.

    Original Description:

    Original Title

    webkit

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document defines keyframe animations for pulse and dos. The pulse animation changes the box shadow at 0% and 100%. The dos animation changes properties like background color, rotation, font size, and color over 0-100% with different values at 0%, 50%, and 100%. It also defines the animation for different browser prefixes. Finally, it sets properties for the div tag for a background image.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views6 pages

    Webkit

    Uploaded by

    Rosales Sandy
    The document defines keyframe animations for pulse and dos. The pulse animation changes the box shadow at 0% and 100%. The dos animation changes properties like background color, rotation, font size, and color over 0-100% with different values at 0%, 50%, and 100%. It also defines the animation for different browser prefixes. Finally, it sets properties for the div tag for a background image.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 25px 3px rgba(34, 188, 224, 0.

    6); } 100% { -webkit-box-shadow: 0 0 25px 3px rgba(224, 85, 38, 0.8), 0 0 45px 5px rgba(224, 85, 38, 0.5); }

    @-webkit-keyframes dos{ 0%{ background-color: #001100; transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); font-size: 26px; color:#FF00FF; } 50%{ background-color: #008800; transform: rotate(0deg);

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -o-transform: rotate(0deg); font-size: 40px; color:#FF22FF; } 100%{

    background-color: #00FF00; transform: rotate(5deg);

    -webkit-transform: rotate(5deg);

    -moz-transform: rotate(5deg);

    -o-transform: rotate(5deg); font-size: 33px; color:#FF5533; }

    } @-moz-keyframes dos{ 0%{ background-color: #001100; -moz-transform: rotate(-5deg);

    font-size: 26px; color:#FF00FF; } 50%{ background-color: #008800; -moz-transform: rotate(0deg); font-size: 40px; color:#FF22FF;

    } 100%{ background-color: #00FF00; -moz-transform: rotate(5deg); font-size: 33px; color:#FF5533; } } @keyframes dos{ 0%{ background-color: #001100; transform: rotate(-5deg);

    -webkit-transform: rotate(-5deg);

    -moz-transform: rotate(-5deg);

    -o-transform: rotate(-5deg); font-size: 26px; color:#FF00FF; } 50%{ background-color: #008800; transform: rotate(0deg);

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -o-transform: rotate(0deg); font-size: 40px; color:#FF22FF; } 100%{ background-color: #00FF00; transform: rotate(5deg);

    -webkit-transform: rotate(5deg);

    -moz-transform: rotate(5deg);

    -o-transform: rotate(5deg); font-size: 33px; color:#FF5533; } } @-o-keyframes dos{ 0%{ background-color: #001100; transform: rotate(-5deg);

    -webkit-transform: rotate(-5deg);

    -moz-transform: rotate(-5deg);

    -o-transform: rotate(-5deg); font-size: 26px; color:#FF00FF; } 50%{ background-color: #008800; transform: rotate(0deg);

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -o-transform: rotate(0deg); font-size: 40px; color:#FF22FF; } 100%{ background-color: #00FF00; transform: rotate(5deg);

    -webkit-transform: rotate(5deg);

    -moz-transform: rotate(5deg);

    -o-transform: rotate(5deg); font-size: 33px;

    color:#FF5533; } } div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; }

    You might also like