The latest articles on DEV Community by Vaishali1192 (@vaishali1192). https://dev.to/vaishali1192 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F599178%2Fb83d0bb9-b285-46be-b296-6c087f80d3cf.png https://dev.to/vaishali1192 en Vaishali1192 Thu, 22 Apr 2021 08:03:16 +0000 https://dev.to/vaishali1192/create-zoom-in-zoom-out-animation-effect-in-css-5hmg https://dev.to/vaishali1192/create-zoom-in-zoom-out-animation-effect-in-css-5hmg <ul> <li>To create zoom in zoom out effect we need to focus on two elements "width" and "height". </li> <li>First define proper height width of an element.</li> <li>Add Css to that element</li> <li>We need to use @keyframes to define animation </li> </ul> <p><code><br> @keyframes zoom-in-zoom-out {<br> 0% {<br> transform: scale(1, 1);<br> }<br> 50% {<br> transform: scale(1.5, 1.5);<br> }<br> 100% {<br> transform: scale(1, 1);<br> }<br> }<br> </code></p> <p><iframe height="600" src="https://codepen.io/vaishali1192/embed/QWdJZVy?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen