CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

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

浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

实例

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

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
/*注：下面的写法将不再写 -webkit- 和 -moz- */

或者用%表示时间段

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

注意：当您在 @keyframes 中创建动画时，需要把它捆绑到某个选择器，否则不会产生动画效果。

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

规定动画的名称
规定动画的时长

实例

把 “myfirst” 动画捆绑到 div 元素，时长：3 秒：

div{
animation: myfirst 3s;
}

其中animation有6个属性

animation-name 规定 @keyframes 动画的名称
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function 规定动画的速度曲线。默认是 “ease” 。 4个属性：ease、ease-in、ease-out、ease-in-out
animation-delay 规定动画何时开始。默认是 0
animation-iteration-count 规定动画被播放的次数。默认是 1。 2个属性：n(次数，不填写即为1)和infinite（无限次）
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 2个属性：normal（正常循环播放，可不填）和alternate（结束后轮流反向播放）
所有属性可以合起来写

div {
animation: myfirst 5s linear 1s infinite alternate;
}

动画名称、动画时间5s、动画速度:匀速、延迟开始时间：1s、动画播放次数：无限次、动画完成后下一周期：轮流反向播放。

CSS3 transform变形转换

CSS3 transform是什么？

transform的含义是：改变，使…变形；转换

CSS3 transform都有哪些常用属性？

transform的属性包括：

rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

下面我们来分解各个属性的用法：

transform:rotate()：

含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”。

.demo_transform1{
    transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
}

transform:skew()：

含义：倾斜；其中“deg”是“度”的意思，如“20deg”表示“10度”。

.demo_transform2{
    transform:skew(20deg);
    -webkit-transform:skew(20deg);
    -moz-transform:skew(20deg);
}

transform:scale(x,y)：

含义：比例；可传2个值，当写一个时，表示xy都一样，“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

.demo_transform2{
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
}

transform:translate(x,y)：

含义：变动，位移；可以传3个值，x、y。

也可以写成 translateX( ), translateY( ).

如表示向右位移100像素，即第一个值为100px，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

.demo_transform2{
    transform:translate(100px,0);
    -webkit-transform:translate(100px,0);
    -moz-transform:translate(100px,0);
}

或者

.demo_transform2{
    transform:translateX(100px);
    -webkit-transform:translateX(100px);
    -moz-transform:translateX(100px);
}

CSS3 transition 过度效果

当鼠标经过时，宽度边为300px,时长为 2 秒：

div{
width:200px;
}
div{
transition: width 2s;
-moz-transition: width 2s;    /* Firefox 4 */
-webkit-transition: width 2s;    /* Safari 和 Chrome */
}
div:hover {
width:300px;
}

transition有4个属性:

1、transition-property：规定应用过渡的 CSS 属性的名称。with可获得宽度属性，height可获得高度属性，transform可获得动画属性，all 可以获取所有属性，所以推荐写all
2、transition-duration：定义过渡效果花费的时间。默认是 0。
3、transition-timing-function：规定过渡效果的时间曲线。默认是 “ease”。有5个属性，分别为：

linear–匀速规定以相同速度开始至结束的过渡效果
ease–慢-快-慢规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in–慢-快规定以慢速开始的过渡效果
ease-out–快-慢规定以慢速结束的过渡效果
ease-in-out–慢-快-慢规定以慢速开始和结束的过渡效果

4、transition-delay：规定过渡效果何时开始。默认是 0。

4个属性可以合起来写

div{
    transition: all 1s linear .5s;
}

4个属性分别表示：所有属性都有动作效果、动作时间为1S、速度为匀速、延迟0.5S开始动画

转自 https://www.cnblogs.com/shiweida/p/7785185.html

Yuyao_Xu

发布了31 篇原创文章 · 获赞 2 · 访问量 6206

私信关注

CSS3动画，过渡效果animation、@keyframes、transform、transition