Explain Animation & Transition properties of CSS with example.

Home Forums Web Programming Explain Animation & Transition properties of CSS with example.

This topic contains 43 replies, has 44 voices, and was last updated by  admin 6 months, 3 weeks ago.

Viewing 14 posts - 31 through 44 (of 44 total)
  • Author
    Posts
  • #4703

    RishabhD62B
    Participant

    Transition property allow us change the property of an element very easily over a given time.
    Animation property allows an element gradually change from one style to another, as many times you want.

    Ex:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {

    transition: font-style 2s;
    }

    div:hover {
    font-style: italic;
    }
    </style>
    </head>
    <body>

    <div>I AM ANUSHKA KHATTRI</div>

    <p>Hover over the div element above, to see the transition effect.</p>

    </body>

    </html>

    Example of Animation:

    <!doctype html>
    <html>
    <head>
    <style>
    div
    {
    height: 200px;
    width: 200px;
    position: relative;
    background-color: purple;

    animation: ww 2s ease-in 0s infinite;
    }

    @keyframes ww
    {
    0% {background-color: purple; top: 0px ;left: 0px;}
    25% {background-color: yellow; top: 0px ;left: 200px;}
    50% {background-color: purple; top: 200px ;left: 200px;}
    75% {background-color: red; top: 800px ;left: 0px;}
    100% {background-color: purple; top: 0px ;left: 0px;}
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    #4721

    Nalin Sharma
    Participant

    The animation property of css allow an element gradually change from one style to another.We must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    width: 100px;
    height: 100px;
    background-color: red;
    -animation-name: example;
    -animation-duration: 4s;
    animation-name: example;
    animation-duration: 4s;
    }

    @keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
    }
    </style>
    </head>
    <body>

    The transition allows you to change property from one value to another, over a given duration.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    width: 200px;
    height: 200px;
    background: red;
    transition: width 5s;
    transition: width 5s;
    }

    div:hover {
    width: 300px;
    }
    </style>
    </head>
    <body>

    #4724

    Pramodcsb42
    Participant

    A transition occurs when an element changes from one state to another, and the browser fills in that state change with a sequence of in-between frames. It has a beginning and an end state.
    The Animation property is used to change element its property as many times. The Animation property does not required any event to generate it.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation-name: example;
    animation-duration: 4s;
    }
    @keyframes example {
    from {background-color: green;}
    to {background-color: red;}
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    <!Doctype html>
    <html>
    <head>
    <style>
    div
    {
    width:100px;
    height:100px;
    background:blue;
    transition:width 2s;
    }
    div:hover
    {
    width:300px;
    }
    </style>
    </head>
    <body>
    <div></div>

    </body>
    </html>

    #4725

    Piyushatri
    Participant

    The transition property can be used to create a smoother transition from one state change to another (e.g. changing link color on hover) that resembles a fade in/out effect. The animation property can be used to create a sliding effect.

    In the example below, the property being changed is the background color. The change will take 1 second to complete, display in a linear speed and will be delayed for 0.5 seconds.

    p{
    background: #2db34a;
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 0.5s;
    }
    p:hover {
    background: #ff7b29;
    }

    This can also be written using shorthand syntax by using just the transition property.

    p{
    background: #2db34a;
    transition: background 1s linear 0.5s;
    }
    p:hover {
    background: #ff7b29;
    }

    Similar to transitions, a timing function and delay can be declared as well, using the animation-timing-function and animation-delay properties.

    .animated-element {
    animation-name: vertical-slide;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-delay: .5s;
    }
    This can also be written in shorthand.

    .animated-element {
    animation: vertical-slide 2s ease-out .5s;
    }

    #4736

    naveen25B
    Participant

    animation-:
    An animation lets an element gradually change from one style to another.
    You can change as many CSS properties you want, as many times you want.
    To use CSS3 animation, you must first specify some keyframes for the animation.
    Keyframes hold what styles the element will have at certain times.
    transition:-
    CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.
    css animation example
    @keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
    }
    div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    }

    transition example
    div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
    }

    #4744

    AyushBishtCSB68
    Participant

    A transition only plays as a reaction to a CSS property that has changed. Example when you use the hover property when that triggers only then the effect with take place. While in animation event starts as soon as the page is loaded in browser. If the duration part is not specified then the transition will have no effect as the default value is set to 0.
    Example:-

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #trans{
    width: 100px;
    height: 60px;
    background: green;

    transition: width 2s, height 2s;
    }

    #trans:hover {
    width: 300px;
    height: 300px;
    background: hotpink;
    }

    #anim {
    width: 150px;
    height: 100px;
    background-color: green;
    animation-name: animation;
    animation-duration: 6s;
    }
    @keyframes animation {
    from {background-color: green;}
    to {background-color: red;}
    }
    </style>
    </head>
    <body>
    <div id=”trans”><h2> this is transition</h2></div>
    <div id=”anim”><h2> this is animation</h2></div>

    </body>
    </html>

    #4755

    Transitions:
    CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.
    Example:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s,height 2s;
    }

    div:hover {
    width: 300px;
    height: 300px;
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    Animation:
    An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS3 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.
    Example:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    width: 100px;
    height: 100px;
    background-color: green;
    -webkit-animation-name:demo;
    -webkit-animation-duration: 4s;
    }
    @-webkit-keyframes demo {
    from {background-color:green;}
    to {background-color: yellow;}
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    #4762

    Lokesh CSB09
    Participant

    Transition property allows to change the property of an element very smoothly over a given duration.
    Eg. Of Transition.
    <!doctype html>
    <html lang=”en-US”>
    <head>
    <title>GadgetsGeek</title><meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
    <style>
    .bnow {
    hieght: 80px;
    width: 160px;
    border-radius: 25px;
    box-shadow: none;
    transition: height 2s width 2s linear 1s;
    }

    .bnow:hover {
    hieght: 100px;
    width: 200px;
    }
    </style>
    </head>
    <body>
    <center></center>
    </body>
    </html>

    Animation property allows an element gradually change from one style to another, as many times you want.
    Eg. Of Animation.
    <!doctype html>
    <html lang=”en-US”>
    <head>
    <title>GadgetsGeek</title><meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
    <style>
    div.d {
    border-radius: 30px;
    width: 30px;
    height: 30px;
    background-color: black;
    position: relative;
    animation: mysecond 3s linear 0s infinite alternate;
    }
    @keyframes mysecond {
    0% {background-color:black; left:440px; top:100px;}
    20% {background-color:grey; left:600px; top:0px;}
    40% {background-color:white; left:700px; top:100px;}
    60% {background-color:green; left:800px; top:0px;}
    80% {background-color:blue; left:900px; top:100px;}
    100% {background-color:yellow; left:1040px; top:0px;}

    }
    @keyframes myfirst {
    0% {background-color:black; left:440px; top:0px;}
    20% {background-color:grey; left:600px; top:100px;}
    40% {background-color:white; left:700px; top:0px;}
    60% {background-color:green; left:800px; top:100px;}
    80% {background-color:blue; left:900px; top:0px;}
    100% {background-color:yellow; left:1040px; top:100px;}

    }
    </style>
    <body>
    <div class=”d”>
    </div>
    </body>
    </html>

    #4764
    Mayank16B
    Mayank16B
    Participant

    CSS Transitions are used to enhance the interactivity of the web pages.With css transitions we smoothly change one or several css properties from one value to another over a given amount of time.
    Example:
    <html>
    <head>
    <style>
    div
    {
    height:100px;
    width:200px;

    background:black;
    transition:height 1s;
    }
    div:hover
    {
    height:300px;
    }
    </style>
    </head>
    <body>
    <div></div>

    </body>
    </html>

    ______________________________________________________________________________________________________

    CSS Animation:An animation is a visualization of css properties changing over a period of time.It needs only two things:
    1.The CSS animation declaration.
    2.The keyframes that define what properties get animated,when they get animated and how they get animated.

    Example:

    <html>
    <head>
    <style>
    div {
    height: 200px;
    width: 100px;

    background-color: black ;
    animation-name: example;
    animation-duration: 2s;
    }
    @keyframes example {
    from {background-color: black;}
    to {background-color: red;}
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    #4775

    robin64B
    Participant

    CSS Animation properties:-An animation lets an element gradually change from one style to another.
    The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.

    Example:-
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-animation-name: example;
    -webkit-animation-duration: 4s;
    animation-name: example;
    animation-duration: 4s;
    }

    @-webkit-keyframes example {
    0% {background-color: red;}
    25% {background-color: yellow;}
    50% {background-color: blue;}
    100% {background-color: green;}
    }

    @keyframes example {
    0% {background-color: red;}
    25% {background-color: yellow;}
    50% {background-color: blue;}
    100% {background-color: green;}
    }
    </style>
    </head>
    <body>

    <div></div>

    </body>
    </html>

    CSS Transition properties:-CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
    For example, if you change the color of an element from red to blue, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-property: width, height;
    -webkit-transition-duration: 2s;
    transition-property: width, height;
    transition-duration: 2s;
    }

    div:hover {
    width: 300px;
    height: 300px;
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    #4792
    pranjal43b
    pranjal43b
    Participant

    CSS animations and transitions allow the appearance and behavior of an element to be altered in multiple keyframes. Transitions provide a change from one state to another ,while animations can set multiple points of transition upon different keyframes.

    eg. <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    width: 100px;
    height: 100px;
    background-color: blue ;
    animation-name: example;
    animation-duration: 4s;
    }
    @keyframes example {
    from {background-color: blue;}
    to {background-color: red;}
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    <!Doctype html>
    <html>
    <head>
    <style>
    div
    {
    width:100px;
    height:100px;
    background:blue;
    transition:width 2s;
    }
    div:hover
    {
    width:300px;
    }
    </style>
    </head>
    <body>
    <div></div>

    </body>
    </html>

    #4795

    MayankB17
    Participant

    for a transition to take place, an element must have a change in state, and different styles must be identified for each state. The easiest way for determining styles for different states is by using the :hover, :focus, :active, and :targetpseudo-classes.

    Ex:
    .trans {
    background: #grey;
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: linear;
    }
    .trans:hover {
    background: #red;
    }

    Animations within CSS3 allow the appearance and behavior of an element to be altered in multiple keyframes. Transitions provide a change from one state to another, while animations can set multiple points of transition upon different keyframes.

    Ex:

    @keyframes slide {
    0% {
    left: 0;
    top: 0;
    }
    50% {
    left: 244px;
    top: 100px;
    }
    100% {
    left: 488px;
    top: 0;
    }
    }

    #4823

    admin
    Keymaster

    Animation property allows an element gradually change from one style to another, as many times you want.
    For ex.<!DOCTYPE html>
    <html>
    <head>
    <style>
    #div1 {
    width: 200px;
    height: 150px;
    background: red;
    transition: width 2s;
    }

    div:hover {
    width: 300px;
    }

    #div2 {
    width: 200px;
    height: 150px;
    background-color: red;
    animation-name: animate;
    animation-duration: 4s;

    @keyframes animate {
    0% {background-color: red;}
    25% {background-color: yellow;}
    50% {background-color: blue;}
    100% {background-color: green;}
    }
    }
    </style>
    </head>
    <body>

    <div id=”div1″>Transition</div>
    <p>Hover over the div element above, to see the transition effect.</p>

    <div id=”div2″>Animation</div>

    </body>
    </html>

    #4824

    admin
    Keymaster

    An animation lets an element gradually change from one style to another.You can change as many CSS properties you want, as many times you want.
    To use animation, you must first specify some keyframes for the animation.Keyframes hold what styles the element will have at certain times

    Animations have many properties:
    animation A shorthand property for setting all the animation properties
    animation-delay Specifies a delay for the start of an animation
    animation-direction Specifies whether an animation should play in reverse direction or alternate
    cycles
    animation-duration Specifies how many seconds or milliseconds an animation takes to complete one
    cycle
    animation-fill-mode Specifies a style for the element when the animation is not playing (when it
    is finished, or when it has a delay)
    animation-iteration-count Specifies the number of times an animation should be played
    animation-name Specifies the name of the @keyframes animation
    animation-play-state Specifies whether the animation is running or paused
    animation-timing-function Specifies the speed curve of the animation

    eg.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    }

    @keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
    }
    </style>
    </head>
    <body>

    <div></div>

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

    </body>

    TRANSITION:

    Transitions allows you to change property values smoothly (from one value to another), over a given duration.
    To create a transition effect, you must specify two things:

    1. the CSS property you want to add an effect to
    2. the duration of the effect
    If the duration part is not specified, the transition will have no effect, because the default value is 0.

    eg.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    }

    div:hover {
    width: 300px;
    }
    </style>
    </head>
    <body>

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

    <div></div>

    <p>Hover over the div element above, to see the transition effect.</p>

    </body>

    The main differrence between animation and transition is:
    transition require an event to trigger whereas animation does not need so.

Viewing 14 posts - 31 through 44 (of 44 total)

You must be logged in to reply to this topic.