{"id":1824,"date":"2019-07-03T12:26:25","date_gmt":"2019-07-03T06:56:25","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=1824"},"modified":"2019-07-03T12:26:25","modified_gmt":"2019-07-03T06:56:25","slug":"learn-animations-css","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/learn-animations-css\/","title":{"rendered":"Learn how to do animations with CSS"},"content":{"rendered":"<p style=\"text-align: left;\"><span style=\"color: #000000;\">I<\/span>n this blog, I am going to discuss the CSS animation in details. It makes possible to animate transitions from one CSS style configuration to another. CSS allows animation of HTML elements without using JavaScript or Flash. If we give a dynamic look on our web page without jquery then we have to know some animation properties, with this property we can create an animated style.<\/p>\n<pre style=\"text-align: left;\"><strong><span style=\"color: #993300;\">1. animation-name<\/span>\r\n<span style=\"color: #993300;\">2. animation-duration<\/span>\r\n<span style=\"color: #993300;\">3. animation-timing-function<\/span>\r\n<span style=\"color: #993300;\">4. animation-delay<\/span>\r\n<span style=\"color: #993300;\">5. animation-iteration-count<\/span>\r\n<span style=\"color: #993300;\">6. animation-direction<\/span>\r\n<span style=\"color: #993300;\">7. animation-fill-mode<\/span>\r\n<span style=\"color: #993300;\">8. animation-play-state<\/span>\r\n<span style=\"color: #993300;\">9. @keyframe<\/span><\/strong><\/pre>\n<ul>\n<li>Each animation needs to be defined with the <em><ins datetime=\"2019-06-28T10:50:09+00:00\">@keyframes<\/ins><\/em>, which control the intermediate animation steps in CSS3.<\/li>\n<\/ul>\n<p>You can follow these methods to create an animation style&#8230;&#8230;..<\/p>\n<p><span style=\"color: #993300;\"><strong><ins datetime=\"2019-06-28T10:50:09+00:00\">HTML<\/ins><\/strong><\/span><\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;title&gt;&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n<span style=\"color: #cc3300;\"><b>    &lt;div class=\"box\"&gt;&lt;\/div&gt;<\/b><\/span>\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><span style=\"color: #993300;\"><strong><ins datetime=\"2019-06-28T10:50:09+00:00\">CSS<\/ins><\/strong><\/span><\/p>\n<pre><span style=\"font-size: small;\">body{<\/span>\r\n<span style=\"font-size: small;\">padding: 20px;<\/span>\r\n<span style=\"font-size: small;\">margin:0;<\/span>\r\n<span style=\"font-size: small;\">}<\/span>\r\n\r\n<span style=\"font-size: small;\">.box{\r\nwidth: 150px;<\/span>\r\n<span style=\"font-size: small;\">height: 150px;<\/span>\r\n<span style=\"font-size: small;\">float:left;<\/span>\r\n<span style=\"font-size: small;\">background: red;<\/span>\r\n<span style=\"font-size: small;\">border-radius: 50%;<\/span>\r\n<span style=\"font-size: small;\">position: relative;<\/span>\r\n<span style=\"font-size: small;\">animation-name: box;<\/span>\r\n<span style=\"font-size: small;\">animation-duration: 5s;<\/span>\r\n<span style=\"font-size: small;\">animation-delay: 2s;<\/span>\r\n<span style=\"font-size: small;\">animation-iteration-count: infinite;<\/span>\r\n<span style=\"font-size: small;\">animation-direction: alternate;<\/span>\r\n<span style=\"font-size: small;\">animation-timing-function: linear;<\/span>\r\n<span style=\"font-size: small;\">}\r\n<\/span>\r\n<span style=\"font-size: small;\">@keyframes box{<\/span>\r\n<span style=\"font-size: small;\">0%{top: 0;left: 0;background: red;}<\/span>\r\n<span style=\"font-size: small;\">25%{top: 0;left: 250px;background:\u00a0 yellow;}<\/span>\r\n<span style=\"font-size: small;\">50%{top: 250px;left: 250px;background: green;}<\/span>\r\n<span style=\"font-size: small;\">75%{top: 250px;left: 0;background: blue;}<\/span>\r\n<span style=\"font-size: small;\">100%{top: 0;left: 0;background: red;}<\/span>\r\n<span style=\"font-size: small;\">}<\/span>\r\n\r\n<span style=\"font-size: small;\">@-webkit-keyframes box{<\/span>\r\n<span style=\"font-size: small;\">0%{top: 0;left: 0;background: red;}<\/span>\r\n<span style=\"font-size: small;\">25%{top: 0;left: 250px;background: yellow;}<\/span>\r\n<span style=\"font-size: small;\">50%{top: 250px;left: 250px;background: green;}<\/span>\r\n<span style=\"font-size: small;\">75%{top: 250px;left: 0;background: blue;}<\/span>\r\n<span style=\"font-size: small;\">100%{top: 0;left: 0;background: red;}<\/span>\r\n<span style=\"font-size: small;\">}<\/span>\r\n\r\n<span style=\"font-size: small;\">@-moz-keyframes box{<\/span>\r\n<span style=\"font-size: small;\">0%{top: 0;left: 0;background: red;}<\/span>\r\n<span style=\"font-size: small;\">25%{top: 0;left: 250px;background: yellow;}<\/span>\r\n<span style=\"font-size: small;\">50%{top: 250px;left: 250px;background: green;}<\/span>\r\n<span style=\"font-size: small;\">75%{top: 250px;left: 0;background: blue;}<\/span>\r\n<span style=\"font-size: small;\">100%{top: 0;left: 0;background: red;}<\/span>\r\n<span style=\"font-size: small;\">}<\/span><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, I am going to discuss the CSS animation in details. It makes possible to animate transitions from one CSS style configuration to another. CSS allows animation of HTML elements without using JavaScript or Flash. If we give a dynamic look on our web page without jquery then we have to know some [&hellip;]<\/p>\n","protected":false},"author":46,"featured_media":1839,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[113,13,5],"tags":[90,126],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v14.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Learn how to do animations with CSS<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/learn-animations-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn how to do animations with CSS\" \/>\n<meta property=\"og:description\" content=\"In this blog, I am going to discuss the CSS animation in details. It makes possible to animate transitions from one CSS style configuration to another. CSS allows animation of HTML elements without using JavaScript or Flash. If we give a dynamic look on our web page without jquery then we have to know some [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/learn-animations-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/sujata.biswas.92775\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-03T06:56:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/07\/maxresdefault-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/learn-animations-css\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/07\/maxresdefault-1.jpg\",\"width\":1280,\"height\":720},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/learn-animations-css\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/learn-animations-css\/\",\"name\":\"Learn how to do animations with CSS\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/learn-animations-css\/#primaryimage\"},\"datePublished\":\"2019-07-03T06:56:25+00:00\",\"dateModified\":\"2019-07-03T06:56:25+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/1bb8ecc843733c73de8e4eae524df30b\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/learn-animations-css\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/1bb8ecc843733c73de8e4eae524df30b\",\"name\":\"Sujata Biswas\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8cdca25f1f77a0a5d250c355d6638721?s=96&r=g\",\"caption\":\"Sujata Biswas\"},\"sameAs\":[\"https:\/\/www.facebook.com\/sujata.biswas.92775\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1824"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=1824"}],"version-history":[{"count":6,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1824\/revisions"}],"predecessor-version":[{"id":1838,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1824\/revisions\/1838"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/1839"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=1824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=1824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=1824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}