利用CSS3制作网页动画

一.CSS3变形transform
　　1.平移：

　　　　translate(x,y) translateX(x) translateY(y)

　　注意：

　　　　如果想只向X轴平移那么可以translateX，如果想只向X轴平移那么可以translateY，X和Y不能共存。如果想向两个方向平移，那么使用translate

　　　　　　y轴
　　　　　　^ -
　　　　　　|
　　　　　　|
　　　　　　|
　　　　　　|
　　　　　　|
　-　　　　  |
 ---------------------------------> + x轴
　　　　　　|
　　　　　　|
　　　　　　|
　　　　　　|
　　　　　　|
　　　　　　| +

　　2.缩放：　　

　　　　scale(x放大倍数，y放大倍数) scaleX(x放大倍数) scaleY(Y放大倍数)

　　注意：

　　　　如果想放大那么写大于1的数，如果想缩小，那么写小于1的数

　　3.倾斜：

　　　　 skew(x轴倾斜角度，y轴倾斜角度) skewX(x轴倾斜角度) skewY(y轴倾斜角度)

　　注意：

　　　　x轴为正值按照逆时针x轴为负值按照顺时针，y轴正值为顺时针倾斜，y轴负值为逆时针倾斜

　　4.旋转：

　　　　 rotate(旋转角度) 正值为顺时针旋转，负值为逆时针旋转

二.CSS3过渡

　　transition:

　　　　需要过度的属性 过度时间(s) 过度动画函数 延迟时间(s)

　　过渡动画函数：
　　　　ease：

　　　　　　速度由快到慢（默认值）
　　　　linear：

　　　　　　速度恒速（匀速运动）
　　　　ease-in：

　　　　　　速度越来越快（渐显效果）
　　　　ease-out：

　　　　　　速度越来越慢（渐隐效果）
　　　　ease-in-out：

　　　　　　速度先加速再减速（渐显渐隐效果）

　　img:hover{
　　　　transform: rotate(90deg) scale(1.2);
　　　　transition: all 1s linear 1s;
　　}

　　过渡处罚机制：
　　　　伪类触发
　　　　：hover
　　　　：active
　　　　：focus
　　　　：checked

　　媒体查询：

　　　　通过@media属性判断设备的尺寸，方向等
　　JavaScript触发：

　　　　用JavaScript脚本触发

三.CSS3动画

　　1.设置关键帧
　　　　@keyframes 关键帧名称{
　　　　0%{
　　　　width: 0;
　　　　transform: scale(1.5);
　　　}
　　　　33%{
　　　　width: 60px;
　　　　transform: translate(200px,0px) scale(2);
　　　}
　　　　66%{
　　　　width: 120px;
　　　　transform: translate(300px,0px);
　　　}
　　　　100%{
　　　　width: 200px;
　　　　transform: translate(400px,0px);
　　　}
　　　}
　　2.调用关键帧
　　　　animation:

　　　　　　关键帧名称 执行时间 播放方式 延迟时间 播放次数;

转载于:https://www.cnblogs.com/wnwn/p/9934844.html