Reply to thread

Message: <blockquote data-quote="gihanrox123" data-source="post: 17429953" data-attributes="member: 515897"><img src="http://www.ceffectz.com/images/czblog/2014/november/item-295/css3animation-jsanimation.ceffectz.com.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" />What is Animation?Animation is the illusion of movement that is created by displaying a series of still images in rapid succession. When it comes to the world of computers, graphic software is used to create these illusional masterpieces.If you are a techie, you should be familiar with the primary methods of creating animations on the web. The current trend has proven to be either CSS3 or JavaScript. The one you choose clearly depends on various requirements of the project that you are doing and its related effects.With the ability create even the most basic animations, JS and CSS3 has their own pros and cons. Let’s check them out.CSS3 Animations<img src="http://www.ceffectz.com/images/czblog/2014/november/item-295/css3-logo.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />Using CSS3 animations, developers are able to create animations that can replace animated images, flash animations as well as JavaScript animations in new and existing web pages. Basically what a CSS3 animation does is that it allows elements to gradually change from one style to another. As a developer you are able to change as many properties you want and as many times you want. Furthermore, you can even specify when the change will happen in percent, or use keywords ‘from’ and ‘to’ which represents the values 0% - 100%. 0% is the start of the animation while 100% is when the animation is fully complete.Great CSS3 FREE Resources:<a href="http://www.ceffectz.com/discussions/animate-css-and-justin-aguilar-css3-animations" target="_blank"> Animate.css and Justin Aguilar CSS3 Animations</a>Here is a table that best describes the @keyframes rule as well as all the animation properties of CSS3.@keyframes : This specifies the animationanimation    : This sets all animation properties except the  animation-fill-mode and the animation-play-state  propertyanimation-direction: This property specifies whether or not the animation should play in reverse on alternate cyclesanimation-delay: Specifies when the animation will startanimation-duration : The property specifies how many seconds or milliseconds an animation will take to complete one cycleanimation-fill-mode :Specifies what styles will apply for each element when the animation is finished or when it has a delayanimation-name: Provides you with the name of the @keyframes animationanimation-iteration-count: Gives the number of times an animation should be playedanimation-timing-function: Specifies the speed curve of the animationanimation-play-state: Tells you if the animation is paused or runningWith CSS3 animations, you can define the animation itself independently of the target element, and then use the animation-name property to choose the required animation. Did you know that CSS animations are still mostly vendor prefixed? -webkit- is used in Chrome, Safari, Safari Mobile, Opera as well as Android Browser. Firefox and Internet Explorer both ship without prefixes. There are many tools that will help you to create a prefixed version of the CSS you require while you can also write an unprefixed version in your source file.Check out the Pros and Cons of CSS3Advantages<ul> <li data-xf-list-type="ul">No more JavaScript or Flash files for showing animations, scaling and rotating images</li> <li data-xf-list-type="ul">No more images are needed to round the border of buttons</li> </ul>READ MORE : <a href="http://www.ceffectz.com/discussions/picking-the-faster-choice-css3-animation-or-js-animation" target="_blank">ceffectz</a></blockquote>

Verification: Nawa warak dahaya keeyada? (Namaya wadi kireema dahaya)

Top Bottom