\n
1) CSS We have 5 properties that allow us to control CSS (Remember: properties are a part of a CSS rule.)<\/p>\n Example A:<\/p>\n The transition property is the SHORTHAND version of the above four properties in example A.<\/p>\n There are two properties that are required in order for the transition to take effect:<\/p>\n 1. 2. Transition Example:<\/p>\n .square<\/strong> {transition: border-color 0.5s ease-in 3s;}<\/p>\n .square:hover<\/strong> {border-color: #FF1654;}<\/p>\n<\/div>\n You don’t have to know all the details. Just recognizing the shorthand code will be enough for you to be able to manipulate a CSS3 rule that you are copying and pasting into your own style sheet.<\/p>\n 2) The CSS The Example of Transition and Transform on an Element:<\/p>\n 3) CSS So there are basically two parts to these animations:<\/p>\n The 0% is the beginning. 100% is the end. You can also add in between percentages, such as 60%.<\/p>\n We need to define our\u00a0 @keyframes Example with Transform:<\/strong><\/p>\n Notice all the curly braces in the example. They are nested in pairs { }.<\/p>\n To make the animation work, you need to bind the\u00a0 Animation Properties<\/strong><\/p>\n The There are 9 properties you can use that allow you to control the CSS CSS Example:<\/strong><\/p>\n We can shorten it with a SHORTHAND property.<\/p>\n The Shorthand Example:<\/strong><\/p>\n (Space-separate all the individual values you want to add. The order doesn’t matter except when using both duration<\/strong> and delay<\/strong>. They need to be in that order. Note:<\/b> Always specify the duration, otherwise the duration is 0 and it will never be played.)<\/p>\n REMINDER: value of the\u00a0 The word we are matching here is “bounceIn”<\/span>.<\/p>\n Next, we need to give an element in our HTML page a class of .box.<\/strong>\u00a0(See the example below.) It will bounce in and last 4 seconds. We’ll give another div a class of .box2. It will bounce in twice and last 6 seconds after a 3 second delay. Here’s the code we need.<\/p>\n CSS Code:<\/strong><\/p>\n HTML Code:<\/strong><\/p>\n In our DEMO, we also give the first box a class of .redBox and the second one a class of .blueBox. We’ve given them different colors, widths etc. in those separate classes.<\/p>\n NOTE: We have not included CSS vendor prefixes<\/strong><\/a> in the above example for brevity sake.<\/p>\n DEMO:<\/p>\n Red Box, Blue Box Bounce in<\/a> If these examples seem complicated right now, don’t despair.<\/p>\n Many code libraries<\/strong> and tools are available online to add CSS animations quickly without having to write the code yourself. Animate.css<\/a><\/strong> provides several pre-made animations you can add to a web page. You can copy all the css code into your own style sheet, then link to the style sheet in the head section of your HTML document.<\/p>\n Here’s a snippet from the animate.css file that you can download and use:<\/strong><\/p>\n NOTE: We have included a \u00a0CSS vendor prefix<\/strong><\/a> in this example.<\/p>\n Notice the Follow the Steps<\/strong><\/p>\n In your HTML document, you can give an element, such as a <div><\/strong> a class of .subtleFadeIn<\/strong>, then put the example snippet (above) into a CSS style sheet and use the <link><\/strong> tag in your HTML document to link to the style sheet. Then check your page out in a web browser to see the box fade in from the right side.<\/p>\n DEMO:<\/p>\n fadeInRight DEMO<\/a> JavaScript (and jQuery) allow you to animate things that CSS can\u2019t (such as the scroll position).<\/p>\n Say you want an “About Us” section of a page to gradually appear as a visitor scrolls down. A JavaScript component like ScrollReveal.js<\/a>\u00a0or Wow.js<\/a> can be applied to specific containers (divs) on your page so only those elements animate.<\/p>\n We might want to fade elements in or provide an interesting transformation near the bottom of a long page. We want the animation to occur when the user can actually view them. If we relied on CSS only, the animation would’ve already taken place before the user reached that section of the page. So we need JavaScript.<\/p>\n The Example:<\/strong><\/p>\n The It’s usually a good idea to put the <script> element near the bottom of the HTML file for better PAGE SPEED.<\/p>\n There are collections of JavaScript code called libraries, which provide useful scripts that you can use. These libraries often make it easy to do something that\u2019 quite difficult. Copy and paste the code into your own JS file and add it to your website. Then use the <script><\/strong> tag in your web page to link to it.<\/p>\n Want to add subtle animations that take place as a user scrolls down your web page? Try adding Javascript from\u00a0Wow.js<\/a><\/strong>\u00a0or \u00a0ScrollReveal.js<\/a><\/strong> along with CSS code from\u00a0Animate.css<\/a>.<\/strong><\/p>\n Script Tag Example:<\/strong><\/p>\n One set of script tags in this example links to an external javascript file (wow.min.js) that is in a “js<\/strong>” folder. (This script is minified<\/strong> to make it compact so it loads faster.)<\/p>\n The second set of script tags, in the example, surrounds code that initiates<\/strong> the external script.<\/p>\n IMPORTANT: An element in the web page must have a class of .wow<\/strong> to reference the “wow” js file and a class of .fadeInRight<\/strong> that references one of the styles in animate.css file. If you miss the .wow part, you’re animation will be triggered right away and not wait for you to scroll down the page.<\/p>\n HTML Example:<\/strong><\/p>\n DEMO:<\/p>\n Fade In on Scroll DEMO Animation<\/a> SUMMARY: CSS3 and JavaScript can be used to create subtle animations for a web page. We will use a <link><\/strong> tag in our HTML page to reference our CSS file and a <script><\/strong> tag to reference our JavaScript file. We will use CSS rules in our style sheet and SHORTHAND properties to keep our CSS code concise. We will match our “selectors” in our style sheet with class names in our HTML elements. Then we will experiment with transition, transform, @keyframes and animation properties. We will pay attention to the number of animations and speed of them. By adding them sparingly and at speeds that won’t annoy our visitors, we can create subtle animations that will improve user experience.<\/p>\n","protected":false},"excerpt":{"rendered":" Beginning CSS3 animation CSS3 gives us two primary ways of animating HTML elements: “transition”\u00a0and\u00a0“transform” manipulate elements from one state to another “CSS animations”\u00a0can control a complex series of movements during an animation 1) CSS Transitions\u00a0are used for creating a smooth transition from one state to another. Transitions specify the duration of an element. Without a Continue Reading »<\/a><\/p>\n","protected":false},"author":1,"featured_media":6018,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[304,115],"class_list":{"0":"post-7227","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-and-css","8":"tag-css-animation","9":"tag-javascript","10":"cat-5-id","11":"has_thumb"},"_links":{"self":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/7227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=7227"}],"version-history":[{"count":0,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/7227\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/media\/6018"}],"wp:attachment":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=7227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=7227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=7227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Transitions<\/code><\/strong>\u00a0are used for creating a smooth transition from one state to another. Transitions specify the duration of an element. Without a transition, the change would be abrupt and take effect immediately. By using transitions with transforms, you can produce a smooth, gradual animation. We most often see transitions used on HOVER<\/strong><\/a> states.\u00a0Transitions can be applied a wide variety of CSS properties such as opacity<\/code>, border<\/code>, height<\/code>, width<\/code> and\u00a0font-size.<\/code><\/p>\ntransition<\/code> animations:<\/strong><\/p>\n\n
{transition-property: property<\/strong>; transition-duration: duration<\/strong>; transition-timing-function: timing-function<\/strong>; transition-delay: delay<\/strong>}<\/code><\/div>\n{transition: property duration timing-function delay<\/strong>;}<\/code><\/div>\ntransition-property<\/code><\/strong><\/p>\ntransition-duration<\/code><\/strong><\/p>\n
\ntransform<\/code><\/strong> property allows you to skew, rotate, translate or scale an element.\u00a0Transforms are triggered when an element changes states, such as on mouse-hover or mouse-click.<\/p>\ntransform<\/code> has 6 main properties:<\/strong><\/p>\n\n
\n
scale()<\/code>: affects the size of an element.<\/li>\ntranslate()<\/code>: moves an element sideways or up and down.<\/li>\nrotate()<\/code>: rotates an element clockwise.<\/li>\n<\/ul>\ntransform<\/code> SHORTHAND allows you to string the various transform methods into one property.<\/p>\n.scaleThis {\r\n transform: scale(1, 1);\r\n transition: transform 0.5s ease;\r\n}\r\n.box:hover .scaleThis {\r\n transform: scale(1.5, 1.5);\r\n}\r\n\r\n<\/pre>\n<\/div>\n
\nAnimations<\/code><\/strong> – CSS animations can control a COMPLEX series of movements. They are animations you create with the @keyframes<\/strong> and animation properties.<\/strong><\/p>\n\n
![\"CSS3](\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2018\/07\/css3-keyframes.png\")
<\/p>\n@keyframes<\/code>\u00a0is the CSS\u00a0rule where the animation is created.<\/p>\n@keyframes<\/code><\/strong> CSS at-rule controls the INTERMEDIATE STEPS in a CSS animation sequence. You can specify when the change will happen in percentages<\/strong>, or with the keywords “from”<\/strong> and “to”<\/strong> (which is the same as 0%<\/strong> and 100%<\/strong>).<\/p>\n@keyframes<\/code> rule somewhere in our CSS style sheet.\u00a0Let’s give the set a name of \u2018bounceIn<\/strong>\u2019. You can use any descriptive name that helps you remember it.<\/p>\n@keyframes bounceIn {\r\n 0% {\r\n transform:<\/strong> scale(0.1);\r\n opacity: 0;\r\n }\r\n 60% {\r\n transform:<\/strong> scale(1.2);\r\n opacity: 1;\r\n }\r\n 100% {\r\n transform:<\/strong> scale(1);\r\n }\r\n}<\/pre>\n<\/div>\n@keyframes<\/code> to a selector. @keyframes alone won’t do anything.<\/p>\nanimation<\/code> property is used to call @keyframes<\/code> inside a CSS selector.\u00a0The animation (applied to an element) can be controlled with different animation properties. You can decide such things as how many times the animation plays. You can also delay its start time.<\/p>\nanimation:<\/code><\/strong><\/p>\n\n
.box {\r\nanimation-name: bounceIn;\r\nanimation-duration: 4s;\r\n}<\/pre>\n<\/div>\nanimation<\/code><\/strong> CSS property is a shorthand property for the various animation properties: animation-name<\/code>, animation-duration<\/code>, \u00a0animation-delay<\/code>,\u00a0animation-direction<\/code>, animation-fill-mode<\/code>, and animation-play-state<\/code>.<\/p>\n.box {\r\nanimation: bounceIn 4s;\r\n}<\/pre>\n<\/div>\nanimation-name<\/code> property must match an identifier in the\u00a0@keyframes<\/code> rule, otherwise no animation will occur.<\/p>\nAssociating The Animation with an HTML Element<\/h3>\n
Next Step<\/h4>\n
.box {\r\n animation: bounceIn 4s;\r\n}\r\n\r\n.box2 {\r\nanimation: bounceIn 6s 3s 2;\r\n}\r\n\r\n@keyframes bounceIn {\r\n0% {\r\ntransform: scale(0.1);\r\nopacity: 0;\r\n}\r\n\r\n60% {\r\ntransform: scale(1.2);\r\nopacity: 1;\r\n}\r\n\r\n100% {\r\ntransform: scale(1);\r\n}\r\n}\r\n<\/pre>\n<\/div>\n<div class=\"box redBox><\/strong>...info in our web page...<\/div><\/strong>\r\n<div class=\"box2 blueBox><\/strong>...info in our web page...<\/div><\/strong><\/pre>\n<\/div>\n
\nBounce In Style Sheet\u00a0<\/a><\/p>\n.subtleFadeIn {\r\n-webkit-animation-name: fadeInRight;<\/strong>\r\nanimation-name: fadeInRight;<\/strong>\r\n}\r\n<\/span>\r\n@keyframes fadeInRight<\/strong> {\r\nfrom {\r\nopacity: 0;\r\n-webkit-transform: translate3d(100%, 0, 0);\r\ntransform: translate3d(100%, 0, 0);\r\n}\r\n\r\nto {\r\nopacity: 1;\r\n-webkit-transform: translate3d(0, 0, 0);\r\ntransform: translate3d(0, 0, 0);\r\n}\r\n}\r\n<\/pre>\n<\/div>\n@keyframes<\/code>\u00a0rule.\u00a0The @ rule and its identifier “fadeInRight”\u00a0<\/strong>are followed by a number of rule sets (selectors with declaration blocks as in normal CSS code). The rule sets are surrounded by curly braces, which nest the rule sets inside the @ rule.<\/p>\n
\nfadeInRight Style Sheet<\/a><\/p>\nCSS3 Animations with Javascript (JS)<\/h3>\n
Scroll-based Animations<\/h3>\n
\n
script<\/code><\/a>><\/strong> tag.<\/li>\nsrc<\/code>attribute (external<\/strong>).<\/li>\nAdding JavaScript into an HTML Document<\/h2>\n
![\"\"](\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2018\/07\/javascript-script-tag.png\")
<\/h3>\n<script><\/code><\/strong> tag can be placed in the <head><\/code><\/strong> section of your HTML, in the\u00a0<body><\/code><\/strong> section or after the <\/body><\/code><\/strong> close tag.\u00a0Scripts that are small can be put in an HTML file.\u00a0Larger scripts or those that will be used across several pages, are generally placed in a js<\/code><\/strong> file that is referenced by the HTML document.<\/p>\n<script<\/span> src<\/span>=\"js\/script.js\"<\/span>><\/span><\/script<\/span>><\/span><\/span><\/code><\/pre>\n<script><\/code><\/strong> tag in this example is pointing to the script.js<\/code> file in the js<\/code> folder of our website.<\/p>\nJavaScript Libraries<\/h4>\n
<script src=\"js\/wow.min.js\"><\/script>\r\n<script>\r\nnew WOW().init();\r\n<\/script>\r\n<\/pre>\n<\/div>\n
<div class=\"wow fadeInRight\">\r\nContent to Fade In when User Scrolls down a Web Page\r\n<\/div>\r\n<\/pre>\n<\/div>\n
\nFade In on Scroll DEMO Style Sheet<\/a><\/p>\n