CSS的一些基础知识2

Posted 2020-06-30

## CSS3 过渡 ##

通过 CSS3，可以在不使用 Flash 动画或 javascript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

- 规定您希望把效果添加到哪个 CSS 属性上 
- 规定效果的时长 

   ## transition属性 ##

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

##  CSS3 动画 ##

通过 CSS3，能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

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

在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
- 
- 规定动画的名称 
- 规定动画的时长 


- @keyframes 规定动画。  
- animation 所有动画属性的简写属性，除了 animation-play-state 属性。 
- animation-name 规定 @keyframes 动画的名称。 3 
- animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 
- animation-timing-function 规定动画的速度曲线。默认是 "ease"。 
- animation-delay 规定动画何时开始。默认是 0。 
- animation-iteration-count 规定动画被播放的次数。默认是 1。 
- animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 
- animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。  
- animation-fill-mode 规定对象动画时间之外的状态。 

# 3D 转换 #

CSS3 允许您使用 3D 转换来对元素进行格式化。

 3D 转换方法：

rotateX() 
rotateY() 

rotateY() 旋转
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

实例
div

{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
-moz-transform: rotateY(130deg);    /* Firefox */