css3 - 简书

过渡transition
transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。
transition 属性名称时间运动曲线延迟；

    div {
            border: 1px solid pink;
            width: 100px;
            height: 100px;
            background: pink;
            transition: 3s ;//这里为何要在写一遍，因为hover离开后没有过渡属性效果太生硬，因此在原本属性也写上过渡
        }
        div:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

下表列出了所有的过渡属性:

| 属性 | 描述 | CSS |
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |

2D转换 transform

transform属性有下面几种方法
translate()
rotate()
scale()
skew()
matrix()

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

css变形1.png

scale

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

<style> 
div{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div{
margin:100px;
transform:scale(2,4);转变宽度为原来的大小的2倍，和其原始大小4倍的高度。
}
</style>
<body>
<div>Hello</div>
</body>

rotate() 方法

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

div{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2
{
    transform:rotate(40deg);
}
<body>
<div>你好。这是一个 DIV 元素。</div>
<div id="div2">你好。这是一个 DIV 元素。</div>
</body>

css旋转.png

skew() 方法

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX( );表示只在X轴(水平方向)倾斜。
skewY( );表示只在Y轴(垂直方向)倾斜。

matrix()方法

matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。



</div>

##animation
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
    规定动画的名称
    规定动画的时长
必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0

div
{
animation: myfirst 5s;
}


以下来自W3C对动画的属性介绍

| 属性 | 描述 | CSS |
| [@keyframes](https://www.w3school.com.cn/cssref/pr_keyframes.asp "CSS3 @keyframes 规则") | 规定动画。 | 3 |
| [animation](https://www.w3school.com.cn/cssref/pr_animation.asp "CSS3 animation 属性") | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| [animation-name](https://www.w3school.com.cn/cssref/pr_animation-name.asp "CSS3 animation-name 属性") | 规定 @keyframes 动画的名称。 | 3 |
| [animation-duration](https://www.w3school.com.cn/cssref/pr_animation-duration.asp "CSS3 animation-duration 属性") | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| [animation-timing-function](https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp "CSS3 animation-timing-function 属性") | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| [animation-delay](https://www.w3school.com.cn/cssref/pr_animation-delay.asp "CSS3 animation-delay 属性") | 规定动画何时开始。默认是 0。 | 3 |
| [animation-iteration-count](https://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp "CSS3 animation-iteration-count 属性") | 规定动画被播放的次数。默认是 1。 | 3 |
| [animation-direction](https://www.w3school.com.cn/cssref/pr_animation-direction.asp "CSS3 animation-direction 属性") | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| [animation-play-state](https://www.w3school.com.cn/cssref/pr_animation-play-state.asp "CSS3 animation-play-state 属性") | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
| [animation-fill-mode](https://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp "CSS3 animation-fill-mode 属性") | 规定对象动画时间之外的状态。 | 3 |