html5 animation Ad demo
Title should be bounce up and down.
I have four part pictures for this animation.
 |
| html |
First, a box should put all things,mainly for logos ,ball and text.
 |
| css |
.cont div is the parents of logos,ball and text. using position to adjust the positon of three parts.
Adding animation is the main point in this project.
Must:
animation: [name] [time] [loop or none];
name whatever you like which will using later.
time usually should be any seconds.
loop make it infinite to loop or don't write anything.
animation-fill-mode:both;
The animation-fill-mode property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay).
By default, CSS animations do not affect the element until the first keyframe is "played", and then stops once the last keyframe has completed. The animation-fill-mode property can override this behavior.
animation-delay: time;
delay time before animation begin.
 |
| css |
three parts are all animation with different name and time.
Then bulid three @keyframes [name] to describe the process of changes,which from 0% to 100%. devided into several parts.
transform:translateY(..px).
translate along Y axis.
 |
| css |
transform:scale(X).
expend the size of picture, basicaly number should be 1.
dowmload demo file: https://pan.baidu.com/s/1boW5SiN
