码迷,mamicode.com
首页 > Web开发 > 详细

利用css3制作动画

时间:2018-11-09 16:24:37      阅读:15      评论:0      收藏:0      [点我收藏+]

标签:20px   scale   near   设置   transform   ima   角度   ase   img   

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

利用css3制作动画

标签:20px   scale   near   设置   transform   ima   角度   ase   img   

原文地址:https://www.cnblogs.com/wws553/p/9934784.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!