Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

CSS 3 ANIMATIONS

No description
by

Jessie Biros

on 14 January 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of CSS 3 ANIMATIONS

About Me
- Education
Agenda
CSS3 Animations
CSS3 Animation
This is not an introduction to CSS.

CSS animation is nothing but changing the css property value of an HTML object overtime.

CSS 3 ANIMATIONS
Jessie Biros
- Work Experiences
Undergraduate Course
School: Philippine Normal University

Course: Bachelor of Science in Information
Technology Education [ B S I T E ]


Graduate Course
School: De La Salle University - Manila

Course: Master of Science in Information Technology
St. Paul College, Pasig
High School Faculty
2 Years
ICT
Cognizant [Google Ph]
Programmer Analyst
Asia Pacific Digital
Web Developer
Ford Motors Intl.
Types of Animation in CSS
Transition and Animation
Demo and Sample Ads Banner
2 types of CSS Animation
Transition
Keyframe Animation
animation that occurs
in response to a
change in state
Examples:
- Hover
- Click
- Resize
- Drag
- Scroll
- swipe
- etc.
Steps in creating a transition animation
define what property is gonna be animated
define how long that animation is going to take
define the beginning and ending values for that animation
Sample
create a simple top navigation with hover effects
Syntax
transition-property: width;
transition-duration: 0.3s;
element:hover
Timing Functions
Linear
ease
ease - in
ease-out
ease-in-out
Vendor Prefixes
-webkit-
-moz-
-o-
Multiple Animations
in the transition property put ',' then add more properties
Shorthand Coding
transition: height, background-color, 0.3s, ease-in;
transition: property duration timing-fn;
Keyframe Animation
A type of animation that usually runs automatically
The @keyframes rule specifies the animation code.
During the animation, you can change the set of CSS styles many times.
SYNTAX
animation-duration:
23s
;
animation-name:
thisisaname
;
animation-timing-function:
linear
;
animation-iteration-count:
infinite
;
@keyframes

thisisaname
{

from
{
right: -209px;
}

to
{
right: 960px;
}
}
@keyframes

thisisaname
{
0%{ }
50%{ }
100%{ }
}
DEMO
SIMPLE BANNER ADS
WITH CSS3 ANIMATION
SHORTHAND
animation:
name

duration

timing-function

iteration-count
Thank You!
Q and A
Full transcript