CSS3-动画
CSS3-动画
@keyframes 规则 用于创建动画。在 @keyframes 中规定某项 CSS 样式,能创建由当前样式逐渐改为新样式的动画效果。
animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function速度曲线
ease默认先慢,再快,再慢
linear匀速
ease-in:由慢到快。
ease-out:由快到慢。
ease-in-out:由慢到快再到慢。
step-start跳到鼠标开始那帧
step-end跳到鼠标结束那帧
animation-delay规定动画何时开始。默认是 0,允许负值;
animation-iteration-count规定动画被播放的次数。默认是 1,
infinite无限循环
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"
alternate反向播放
animation:name duration timing-function delay iteration-count direction;
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。
paused暂停
animation-fill-mode规定对象动画时间之外的状态。
none不改变默认行为
forwards当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
注释:在 @keyframes 中创建动画时,把它捆绑到某个选择器,否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性,即可将动画绑 定到选择器:
1.规定动画的名称
2.规定动画的时长
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
CSS3-3D介绍
转换是使元素改变形状、尺寸和位置的一种效果。可以使用 2D 或 3D 转换来转换元素。 在咱们的转换概念当中:是没有display这么一说的, 通过改变元素的透明度去实现从无到有
CSS3-景深
perspective景深(value) 离屏幕多远的距离去观察元素,值越大幅度越小(常用值900px-1200px)
#div1{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150px;
-webkit-perspective:150px; /*Safari and Chrome */
}
rotateX()方法(围绕其在一个给定度数X轴旋转的元素)
注意:添加过渡效果比较明显
div{
width:100px;
height:75px;
border:1px solid black;
transition: all 5s;
}
div:hover{
transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg); /* Safari and Chrome */
}
rotateY()方法(围绕其在一个给定度数Y轴旋转的元素)
div{
width:100px;
height:75px;
border:1px solid black;
transition: all 5s;
}
div:hover{
transform:rotateY(-180deg);
-webkit-transform:rotateY(-180deg); /* Safari and Chrome */
}
translate3d()函数的效果transform:translate3d(30px,30px,200px);值代表X轴、Y轴、Z轴(正值在前负值在后)
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。preserve-3d表示3D透视