{"id":137197,"date":"2024-10-14T16:38:15","date_gmt":"2024-10-14T11:08:15","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137197"},"modified":"2024-10-16T17:22:10","modified_gmt":"2024-10-16T11:52:10","slug":"css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/","title":{"rendered":"CSS Animations, Exercises, Training and Custom Properties and CSS Functions | Transitions, Transformations and Animations"},"content":{"rendered":"\n<p>CSS animations allow you to create dynamic and engaging visual effects on your web pages. They involve defining keyframes, which specify the styles at different points in time, and then applying the animation to elements using the animation property.<\/p>\n\n\n\n<p><strong>Syntax:<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>@keyframes animation-name {<\/p>\n\n\n\n<p>&nbsp; 0% { \/* Styles for the start of the animation *\/ }<\/p>\n\n\n\n<p>&nbsp; 50% { \/* Styles for the middle of the animation *\/ }<\/p>\n\n\n\n<p>&nbsp; 100% { \/* Styles for the end of the animation *\/ }<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.element {<\/p>\n\n\n\n<p>&nbsp; animation: animation-name 2s ease-in-out;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Common Animation Properties<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>animation-name:<\/strong> Specifies the name of the animation.<\/li>\n\n\n\n<li><strong>animation-duration:<\/strong> Sets the duration of the animation.<\/li>\n\n\n\n<li><strong>animation-timing-function:<\/strong> Defines the timing function of the animation (e.g., linear, ease-in, ease-out).&nbsp;<\/li>\n\n\n\n<li><strong>animation-delay:<\/strong> Sets the delay before the animation starts.<\/li>\n\n\n\n<li><strong>animation-iteration-count:<\/strong> Specifies the number of times the animation should repeat.&nbsp;<\/li>\n\n\n\n<li><strong>animation-direction:<\/strong> Sets the direction of the animation (e.g., normal, reverse, alternate).<\/li>\n\n\n\n<li><strong>animation-fill-mode:<\/strong> Specifies what happens before and after the animation.<\/li>\n<\/ul>\n\n\n\n<p><strong>Exercises<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"1\">\n<li>Create a fading animation for a button.<\/li>\n\n\n\n<li>Animate an element to slide in from the left.<\/li>\n\n\n\n<li>Create a rotating element.<\/li>\n\n\n\n<li>Animate a progress bar.<\/li>\n\n\n\n<li>Combine multiple animations for complex effects.<\/li>\n<\/ol>\n\n\n\n<p><strong>Training<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Online tutorials:<\/strong> There are many online tutorials and courses available that cover CSS animations.<\/li>\n\n\n\n<li><strong>Interactive exercises:<\/strong> Practice creating animations using interactive exercises.<\/li>\n\n\n\n<li><strong>Experimentation:<\/strong> Experiment with different animation properties and values to create unique effects.<\/li>\n<\/ul>\n\n\n\n<p><strong>CSS Custom Properties<\/strong><\/p>\n\n\n\n<p>CSS custom properties (also known as variables) allow you to define custom values that can be used throughout your stylesheet. This makes it easier to manage and update styles, especially in responsive web design.<\/p>\n\n\n\n<p><strong>Syntax:<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>:root {<\/p>\n\n\n\n<p>&nbsp; &#8211;primary-color: blue;<\/p>\n\n\n\n<p>&nbsp; &#8211;secondary-color: red;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.element {<\/p>\n\n\n\n<p>&nbsp; color: var(&#8211;primary-color);<\/p>\n\n\n\n<p>&nbsp; background-color: var(&#8211;secondary-color);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>CSS Functions<\/strong><\/p>\n\n\n\n<p>CSS functions provide built-in functionality for various tasks, such as color manipulation, calculations, and more.<\/p>\n\n\n\n<p><strong>Common CSS Functions<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>calc():<\/strong> Performs calculations on values.<\/li>\n\n\n\n<li><strong>hsl():<\/strong> Creates colors using hue, saturation, and lightness.<\/li>\n\n\n\n<li><strong>rgb():<\/strong> Creates colors using red, green, and blue values.<\/li>\n\n\n\n<li><strong>rgba():<\/strong> Creates colors with an alpha channel (opacity).<\/li>\n\n\n\n<li><strong>hsl():<\/strong> Creates colors using hue, saturation, and lightness.<\/li>\n\n\n\n<li><strong>hsla():<\/strong> Creates colors with an alpha channel (opacity).<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>.element {<\/p>\n\n\n\n<p>&nbsp; width: calc(100% &#8211; 20px);<\/p>\n\n\n\n<p>&nbsp; background-color: hsl(200, 50%, 70%);<\/p>\n\n\n\n<p>} By combining CSS animations, custom properties, and functions, you can create dynamic and visually appealing responsive web designs.<\/p>\n\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-3d213aab wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/learning-about-the-translate3d-property-transitions-transformations-and-animations\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>&lt;&lt;Prev<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certificate-in-responsive-web-design\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Back To The Tutorial<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/introduction-to-css-functions-and-custom-properties-custom-properties-and-css-functions\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next&gt;&gt;<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS animations allow you to create dynamic and engaging visual effects on your web pages. They involve defining keyframes, which specify the styles at different points in time, and then applying the animation to elements using the animation property. Syntax: CSS @keyframes animation-name { &nbsp; 0% { \/* Styles for the start of the animation&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-137197","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Animations, Exercises, Training and Custom Properties and CSS Functions | Transitions, Transformations and Animations - Tutorial<\/title>\n<meta name=\"description\" content=\"Prepare effectively for the Certified Responsive Web Design Exam using top study materials. Get Certified Now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Animations, Exercises, Training and Custom Properties and CSS Functions | Transitions, Transformations and Animations - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Prepare effectively for the Certified Responsive Web Design Exam using top study materials. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T11:52:10+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/\",\"name\":\"CSS Animations, Exercises, Training and Custom Properties and CSS Functions | Transitions, Transformations and Animations - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-14T11:08:15+00:00\",\"dateModified\":\"2024-10-16T11:52:10+00:00\",\"description\":\"Prepare effectively for the Certified Responsive Web Design Exam using top study materials. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Animations, Exercises, Training and Custom Properties and CSS Functions | Transitions, Transformations and Animations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Animations, Exercises, Training and Custom Properties and CSS Functions | Transitions, Transformations and Animations - Tutorial","description":"Prepare effectively for the Certified Responsive Web Design Exam using top study materials. Get Certified Now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/","og_locale":"en_US","og_type":"article","og_title":"CSS Animations, Exercises, Training and Custom Properties and CSS Functions | Transitions, Transformations and Animations - Tutorial","og_description":"Prepare effectively for the Certified Responsive Web Design Exam using top study materials. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-16T11:52:10+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/","name":"CSS Animations, Exercises, Training and Custom Properties and CSS Functions | Transitions, Transformations and Animations - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-14T11:08:15+00:00","dateModified":"2024-10-16T11:52:10+00:00","description":"Prepare effectively for the Certified Responsive Web Design Exam using top study materials. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-animations-exercises-training-and-custom-properties-and-css-functions-transitions-transformations-and-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"CSS Animations, Exercises, Training and Custom Properties and CSS Functions | Transitions, Transformations and Animations"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=137197"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137197\/revisions"}],"predecessor-version":[{"id":137420,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137197\/revisions\/137420"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=137197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=137197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=137197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}