show
hidden
fadein
fadeout
slideup
slidedown
旋转
•
transform:rotate(45deg);
扭曲
•
transform:skew(Xdeg,Ydeg)
例子: transform:skew(30deg,10deg);
缩放
•
transform:scale(0.5,0.8)
缩放,参数对应着两个轴的缩放比例,第一个参数控制水平比例,第二个控制竖直比例.
平移
•
transform:translate(x(px),y(px));
第一个参数是左右平移多远,第二个是上下平移多远.
定义原点
•
transform-origin:left top | 0% 0%
CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
过渡属性 transition-property
•
transition-property:指定过渡或动态模拟的CSS属性(一般写all)
•
transition-duration:指定完成过渡所需的时间(s)
•
transition-timing-function:指定过渡函数
不用加括号
ease: 由快到慢
linear: 恒速
ease-in: 速度越来越快
ease-out: 越来越慢
ease-in-out: 先快再慢
•
transition-delay:指定开始出现的延迟时间(s)
•
例子
div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
transition-property: all;
transition-duration:.5s;
transition-timing-function: ease-in;
transition-delay:0.2s;
}
div:hover {
width: 400px;
height:300px;
}
关键帧动画
•
定义关键帧
•
@keyframes changecolor{
0%{
background: red;
}
50%{
background: green;
}
100%{
background: blue;
}
}
•
使用定义的关键帧
•
animation-name:changecolor;
•
动画循环次数
•
animation-iteration-count:infinite;
•
动画播放方向
•
animation-direction:alternate; //normal一直向前，alternate动画播放在第偶数次向前播放，第奇数次向反方向播放。
•
可以写在一起
•
animation: changecolor 5s ease-out 0.2s infinite alternate;
•
设置动画的播放状态
•
animation-play-state:paused;
•
animation-play-state:running;
•
动画播放完之后
•
animation-fill-mode
•
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<style type="text/css">
@keyframes around {
0% {
transform: translateX(0);
}
25% {
transform: translateX(180px);
}
50% {
transform: translate(180px, 180px);
}
75% {
transform: translate(0, 180px);
}
100% {
transform: translateY(0);
}
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
}
div span {
display: inline-block;
width: 20px;
height: 20px;
background: orange;
border-radius: 100%;
animation-name: around;
animation-duration: 10s;
animation-timing-function: ease;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
div:hover span {
animation-play-state: running;
}
</style>
</head>
<body>
<div><span></span>简写看一下</div>
</body>
</html>
评论区