There are a number of ways of achieving animations with CSS3:
\n1. Transitions
\n2. Animations<\/p>\n
Similarities<\/strong> Once you understand the differences it becomes easier to decide which technique to use as each excels at different things.<\/p>\n One of the major differences between animations and transitions can be seen in how you trigger them to start playing.<\/p>\n A transition only plays as a reaction to a CSS property that has changed. A common scenario is one where you use the :hover pseudo class to change the value of a CSS property:<\/p>\n example of hovering to make something larger<\/p>\n To use the example visualized here, if a transition is defined, you would be able to see the circle growing from its normal size to its hover size. Another way of triggering a transition is to use JavaScript to programmatically add or remove CSS classes to simulate a CSS property change. Rounding out our ways of making a property change, you can use JavaScript to set an inline style that changes a property your transition is listening for.<\/p>\n Animations, on the other hand, don’t require any explicit triggering. Once you define the animation, it will start playing automatically. Yep, that’s how animations roll!<\/p>\n This is pretty simple. Animations can be easily made to loop by setting the animation-iteration-count property. You can specify a fixed number of times you want your animation to repeat:<\/p>\n animation-iteration-count: 5; animation-iteration-count: infinite; Defining Intermediate Points \/ Keyframes You can set as many keyframes as you want, and when your animation plays, each keyframe will be hit with the specified property changes reflected. This allows you to create the kinds of involved animations that help HTML5 compete with more established animation technologies like Flash more effectively.<\/p>\n With a transition, you don’t have much control over anything beyond the end result:<\/p>\n A transition simply goes from an initial state to the final state. You cannot specify any points in-between like you can with an animation, so a transition might not be a good choice if you are trying to create the next Teen Girl Squad sensation or a complex animation.<\/p>\n The next thing I will describe is how formal animations and transitions are when it comes to defining a transition between CSS property values.<\/p>\n On the formal side, you have transitions. Every CSS property you want recognized by your transition must be explicitly represented.<\/p>\n For example, let’s say you have something like the following:<\/p>\n #mainContent { If I wanted my transition to affect both the background-color and width properties, I will need to explicitly add another transition entry for width:<\/p>\n #mainContent { Here’s some examples we went over:<\/p>\n \u00a08 Simple Transitions Kathleen’s CSS Animation Click Here<\/a><\/p>\n CSS Animatable<\/a> There are a number of ways of achieving animations with CSS3: 1. Transitions 2. Animations Similarities If you’re not looking too closely both transitions and animations look similar. They both allow you to: Specify which CSS properties to listen for changes on Set timing (easing) functions to alter the rate of going from a one […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-170","post","type-post","status-publish","format-standard","hentry","category-exercises"],"_links":{"self":[{"href":"https:\/\/courses.haigarmen.com\/desn315\/wp-json\/wp\/v2\/posts\/170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.haigarmen.com\/desn315\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.haigarmen.com\/desn315\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.haigarmen.com\/desn315\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.haigarmen.com\/desn315\/wp-json\/wp\/v2\/comments?post=170"}],"version-history":[{"count":8,"href":"https:\/\/courses.haigarmen.com\/desn315\/wp-json\/wp\/v2\/posts\/170\/revisions"}],"predecessor-version":[{"id":211,"href":"https:\/\/courses.haigarmen.com\/desn315\/wp-json\/wp\/v2\/posts\/170\/revisions\/211"}],"wp:attachment":[{"href":"https:\/\/courses.haigarmen.com\/desn315\/wp-json\/wp\/v2\/media?parent=170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.haigarmen.com\/desn315\/wp-json\/wp\/v2\/categories?post=170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.haigarmen.com\/desn315\/wp-json\/wp\/v2\/tags?post=170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nIf you’re not looking too closely both transitions and animations look similar. They both allow you to:<\/p>\n\n
Differences<\/h3>\n
Triggering<\/h4>\n
Looping<\/h4>\n
\nIf you just want your animation to loop forever, you can do that as well:<\/p>\n
\nTransitions, on the other hand, don’t have a property that specifies how many times they can run. When triggered, a transition runs only once. You can make a transition loop by fiddling with the transitionEnd event, but that isn’t particularly straightforward – especially when compared with animations.<\/p>\n
\nWith an animation, you have the ability to define keyframes which give you more control over your CSS property values beyond just the start and the end:<\/p>\nanimations FTW<\/h4>\n
transitions are linear<\/h4>\n
Specifying Properties Up-Front<\/h4>\n
\nbackground-color: #CC0000;
\ntransition:background-color .5s ease-in;
\n}
\n#mainContent:hover {
\ncursor: pointer;
\nbackground-color: #000000;
\nwidth:500px;
\n}
\nUpon hover, I specify a different value for both background-color as well as width. My transition specifies only background-color though. This means your browser is only listening for changes on the background-color property.<\/p>\n
\nbackground-color: #CC0000;
\ntransition:background-color .5s ease-in, width .5s ease-in
\n}
\n#mainContent:hover {
\ncursor: pointer;
\nbackground-color: #000000;
\nwidth: 500px;
\n}<\/p>\nResources<\/h3>\n
\n<\/a>Transitions vs Animations
\n<\/a>25 CSS3 Animation techniques<\/a><\/p>\n
\nhttp:\/\/www.cssanimate.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"