Eclectic Animations

Wireframe Plan for Page

Basics of Animation Keep in mind that transitions and transformations often used with animation A CSS animation is an instruction to progressively update one or more CSS properties over a period of time. Building Blocks  Keyframes— for stages and styles  Name  Stages, as a percentage   CSS Properties, defined for each stage. e.g. opacity, or transform.   Properties — assign @keyframes to elements   Assign the @keyframes  Define how  animated  

Animations involve two basic parts: The animation code using @keyframes Applying the animation to an element More Information at: https://www.w3schools.com/css/css3_animations.asp Click for a quick perusal.

Animations involve two basic parts: For an animation to work, you must specify at least the following two properties: name and duration. Additional Animation Properties In addition to the required animation-name and animation-duration properties, you can further customize and create complex animations using the following properties: animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

#1 Animation: Purpose is to constantly change background color Double click on animateONE.txt. Copy to your stylesheet. I’ll give more instructions on applying it.

#2 Animation: Purpose is to move object in rectangular motion Double click on animateTWO.txt. Copy to your style sheet. There is an #anim div in the HTML <header> I’ll give more instructions on applying the animation.

#3 Animation/Transformation: When user hover over div, it spins Double click on animateTHREE.txt. Copy to your style sheet. Add this div to your HTML: I’ll give more instructions on applying it to the HTML parts. <div class="morph practicePic"> <!– insert small picture here--> </div>