Share
View previous topicGo downView next topic
Admin
Posts : 13
Join date : 2017-10-16
View user profilehttp://jaylenebarias.forumotion.asia

CSS Animatable

on Mon Oct 16, 2017 8:49 pm
Definition and Usage
Some CSS properties are animatable, meaning that they can be used in animations and transitions.

Animatable properties can change gradually from one value to another, like size, numbers, percentage and color.

Browser Support

The numbers in the table specifies the first browser version that fully support CSS animations.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

43.0
4.0 -webkit- 10.0 16.0
5.0 -moz- 9.0
4.0 -webkit- 30.0
15.0 -webkit-
12.0 -o-

Example
Animate the background-color from red to blue:

/* Code for old Chrome, Safari and Opera */
@-webkit-keyframes mymove {
   from {background-color: red;}
   to {background-color: blue;}
}

/* Standard syntax */
@keyframes mymove {
   from {background-color: red;}
   to {background-color: blue;}
}
Member
Member
Posts : 4
Join date : 2017-10-16
View user profile

Re: CSS Animatable

on Mon Oct 16, 2017 9:51 pm
Aside from your example above, what are the other properties that this CSS animatable applicable? 0
Member
Member
Posts : 4
Join date : 2017-10-16
View user profile

Re: CSS Animatable

on Mon Oct 16, 2017 9:52 pm
Aside from your example above, what are the other properties that this CSS animatable applicable?
newbie
newbie
Posts : 2
Join date : 2017-10-16
View user profile

Re: CSS Animatable

on Mon Oct 16, 2017 10:04 pm
What browser can support this css animatable?
Admin
Posts : 13
Join date : 2017-10-16
View user profilehttp://jaylenebarias.forumotion.asia

Re: CSS Animatable

on Mon Oct 16, 2017 10:57 pm
Hi Miss Angel the Properties applicable in animation and transition is all in the below:
background
background-color
background-position
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-color
border-left
border-left-color
border-left-width
border-right
border-right-color
border-right-width
border-spacing
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
bottom
box-shadow
clip
color
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-width
columns
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-size-adjust
font-stretch
font-weight
height
left
letter-spacing
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
right
text-decoration-color
text-indent
text-shadow
top
transform
transform-origin
vertical-align
visibility
width
word-spacing
z-index

if you need some example of it will give you..
Admin
Posts : 13
Join date : 2017-10-16
View user profilehttp://jaylenebarias.forumotion.asia

Re: CSS Animatable

on Mon Oct 16, 2017 10:57 pm
Hi Miss Angel the Properties applicable in animation and transition is all in the below:
background
background-color
background-position
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-color
border-left
border-left-color
border-left-width
border-right
border-right-color
border-right-width
border-spacing
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
bottom
box-shadow
clip
color
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-width
columns
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-size-adjust
font-stretch
font-weight
height
left
letter-spacing
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
right
text-decoration-color
text-indent
text-shadow
top
transform
transform-origin
vertical-align
visibility
width
word-spacing
z-index

if you need some example of it will give you..
Admin
Posts : 13
Join date : 2017-10-16
View user profilehttp://jaylenebarias.forumotion.asia

Re: CSS Animatable

on Mon Oct 16, 2017 11:01 pm
Hi Ms. Emehway the browser can usually use in this is google but it can also all play in mozilla, opera and ethernet.. if you have any question and clarification just comment below
master
master
Posts : 7
Join date : 2017-10-16
View user profile

Re: CSS Animatable

on Mon Oct 16, 2017 11:03 pm
Ma'am Jaylene Can I ask if it is important to use CSS animatable? why ?
master
master
Posts : 7
Join date : 2017-10-16
View user profile

Re: CSS Animatable

on Mon Oct 16, 2017 11:04 pm
Admin wrote:Hi Miss Angel the Properties applicable in animation and transition is all in the below:
background
background-color
background-position
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-color
border-left
border-left-color
border-left-width
border-right
border-right-color
border-right-width
border-spacing
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
bottom
box-shadow
clip
color
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-width
columns
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-size-adjust
font-stretch
font-weight
height
left
letter-spacing
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
right
text-decoration-color
text-indent
text-shadow
top
transform
transform-origin
vertical-align
visibility
width
word-spacing
z-index

if you need some example of it will give you..

Thank you ma'am for sharing these to us :*
Admin
Posts : 13
Join date : 2017-10-16
View user profilehttp://jaylenebarias.forumotion.asia

Re: CSS Animatable

on Wed Oct 18, 2017 2:50 pm

hi miss liza .Certain CSS properties can be animated using CSS Animations or CSS Transitions. Animation means that their values can be made to change gradually over a given amount of time.
Sponsored content

Re: CSS Animatable

View previous topicBack to topView next topic
Permissions in this forum:
You cannot reply to topics in this forum