Article Categories

Selected Reading

Front End Technology Articles

Page 478 of 652

Rotate Out Down Left Animation Effect with CSS

CSS Web Development Front End Technology

Nitya Raut

Updated on 29-Jun-2020 74 Views

To create rotate out down left animation effect with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } Reload page function myFunction() { location.reload(); }

Rotate In Up Right Animation Effect with CSS

CSS Web Development Front End Technology

George John

Updated on 29-Jun-2020 130 Views

To create a rotate in upright animation effect with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } Reload page function myFunction() { location.reload(); }

Rotate In Up Left Animation Effect with CSS

CSS Web Development Front End Technology

Vrundesha Joshi

Updated on 29-Jun-2020 91 Views

To create a rotate in up left animation effect with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { -transform-origin: left bottom; -transform: rotate(-90deg); opacity: 0; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } Reload page function myFunction() { location.reload(); }

Wobble Animation Effect with CSS

CSS Web Development Front End Technology

Jennifer Nicholas

Updated on 29-Jun-2020 331 Views

To create a wobble animation effect with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: ...

Flatten the color depth with CSS

CSS Web Development Front End Technology

Samual Sam

Updated on 29-Jun-2020 325 Views

To flatten the color depth, you need to create an X-Ray.The following parameter is used in this filter −S.NoParameter & Description1XrayGrayscales and flattens the color depth.ExampleYou can try to run the following code to create an X-Ray effect −Live Demo CSS Tutorials

Rotate In Down Right Animation Effect with CSS

CSS Web Development Front End Technology

Chandu yadav

Updated on 29-Jun-2020 75 Views

To create a rotate in down animation effect with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } Reload page function myFunction() { location.reload(); }

Rotate In Animation Effect with CSS

CSS Web Development Front End Technology

Lakshmi Srinivas

Updated on 29-Jun-2020 298 Views

To create a rotate in animation effect with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } Reload page function myFunction() { location.reload(); }

CSS volume Property

CSS Web Development Front End Technology

karthikeya Boyini

Updated on 29-Jun-2020 131 Views

Volume refers to the median volume of the voice. It can have following values −numbers − Any number between '0' and '100'. '0' represents the minimum audible volume level and 100 correspond to the maximum comfortable level.percentage − These values are calculated relative to the inherited value, and are then clipped to the range '0' to '100'.silent − No sound at all. The value '0' does not mean the same as 'silent'.x-soft − Same as '0'.soft − Same as '25'.medium − Same as '50'.loud − Same as '75'.x-loud − Same as '100'.ExampleLet us see an example −

Rotate In Down Left Animation Effect with CSS

CSS Web Development Front End Technology

Nancy Den

Updated on 29-Jun-2020 110 Views

To create a rotate in down animation effect with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } Reload page function myFunction() { location.reload(); }

Roll In Animation Effect with CSS

CSS Web Development Front End Technology

Krantik Chavan

Updated on 29-Jun-2020 573 Views

To create a roll in animation effect with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } Reload page function myFunction() { location.reload(); }

Showing 4771–4780 of 6,517 articles

« Prev 1 … 476 477 478 479 480 … 652 Next »