第九章 ?利用CSS3制作网页动画

一.CSS3变形transform1.平移：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: 关键帧名称 执行时间 播放方式 延迟时间 播放次数;