日常动画的笔记

1、 摇晃的桃子

2、 animation 动画
一个完整的css animation两部分：
A． 一组定义的动画关键帧（超过24幅/s的动画）@keyframes(一幅)
语法:
@keyframes animationname{
keyframes-selector{css-styles;}
}

.box{
10%{css;}
50%{css}
}

Animationname：一组关键帧的名称
B． 描述该动画的css声明@animation——具体动画以及动画时长等行为。
语法：
Animation：name duration(动画持续时间) timing-function(时间曲线，缓入缓出之类) delay(延迟播放动画) iteration-count direction fill-mode play-state；

A． keyframename（需要绑定到选择器的keyframe名称）；none（无动画）
B． time（以秒或毫秒计，默认0）
C． linear；ease；ease-in；ease-out；ease-in-out；
D． time（延迟时间）
E． n（重复播放的次数）；infinite（无限循环）
F． normal（正常播放）；alternate（动画轮流反向播放）
G． paused（规定动画已暂停）；running（规定动画正在播放）
H． none（不改变行为）；forword（动画完成后，保持最后一个属性值）；backwards（在animation-delay指定的开始播放动画之前，应用开始属性值）；both（向前和向后填充模式都被应用）
小车：

缩放：

海上日：

进度条：

全屏切换：

3、 css精灵技术
精灵图，是许多小图片的合并，不高于200kb。
创建容器用

等标签
利用css“background-image”、“background-repeat”、“background-position”组合进行背景定位，将一张大图片中的某个不显示到网页固定位置。