关于css3动画:CSS3CSS3动画我离前端的炫酷又近了一步

文章所波及的局部材料来自互联网整顿，当然还有本人集体的总结和认识，分享的目标在于共建社区和坚固本人。援用的材料如有侵权，请分割自己删除！幸好我在，感激你来！

CSS3 可实现 HTML 元素的动画成果，而不应用 JavaScript 或 Flash。

为了学习前端的动效，我几乎是不折伎俩。目前就抓着 CSS 的动画来搞一波。

⭕老规矩，问句结尾。

在须要变动的工夫节点上指定一些关键帧，关键帧就是此刻所定义的款式。例如我在 1s 左移 5m，3s 左一 15m，这时就有两个关键帧，因为这两个关键帧，画面就产生了位移，那么动画也就产生了。

上面这句话总结到位：动画使元素逐步从一种款式变为另一种款式。

CSS3 的动画次要依赖 @keyframes 和animation来实现。

@keyframes 规定是创立动画。

@keyframes 规定内指定一个 CSS 款式和动画将逐渐从目前的款式更改为新的款式。

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

以上的就是一个简略的动画，关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的实现。也就是从红色变成黄色。

为了失去最佳的浏览器反对，应用 0% 和 100% 选择器是最好的抉择。

animation 既然动画的关键帧都有了，那么就须要把这个关键帧落实并绑定到某个 DOM 上。

能够一起写，也能够离开写属性。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

指定要绑定到选择器的关键帧的名称

语法

animation-name: keyframename|none;
// keyframename 指定要绑定到选择器的关键帧的名称

动画指定须要多少秒或毫秒实现

语法

animation-duration: time;
// time 指定动画播放实现破费的工夫。

指定动画将如何实现一个周期

语法

animation-timing-function: value;

动画函数

linear 动画从头到尾的速度是雷同的。
ease 默认。动画以低速开始，而后放慢，在完结前变慢。
ease-in 动画以低速开始
ease-out 动画以低速完结。
ease-in-out 动画以低速开始和完结。
steps(int,start|end）指定了工夫函数中的距离数量（步长）。

有两个参数，第一个参数指定函数的距离数，该参数是一个正整数（大于 0）。

第二个参数是可选的，示意动画是从时间段的结尾间断还是开端间断。
cubic-bezier(n,n,n,n) 贝塞尔曲线

给一个贝塞尔曲线的的一个网站，你会感激🙏我的哈！地址

定义动画什么时候开始，单位能够是秒（s）或毫秒（ms）

语法

animation-delay: time;
// time 定义动画开始前期待的工夫，以秒或毫秒计

定义动画应该播放多少次。

语法

animation-iteration-count: value;
//  n 定义应该播放多少次动画
//     infinite 指定动画应该播放有限次（永远）

是否循环交替反向播放动画。

这个是一个可玩性很高的一个属性。

语法

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

参数解析

normal 默认值。动画按失常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
initial 继承的属性
inherit 继承的属性

属性规定当动画不播放时（当动画实现时，或当动画有一个提早未开始播放时），要利用到元素的款式。

如果你须要思考到动画的状态，能够应用这个属性，比方保留动画扭转后的成果。

语法

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

参数解析

none 默认值。动画在动画执行之前和之后不会利用任何款式到指标元素。
forwards 在动画完结后（由 animation-iteration-count 决定），动画将利用该属性值。
backwards 动画将利用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。
both 动画遵循 forwards 和 backwards 的规定。
initial 继承的属性
inherit 继承的属性

指定动画是否正在运行或已暂停。

语法

animation-play-state: paused|running;
// paused 指定暂停动画
// running 指定正在运行的动画

div 的色彩由红色变为黄色

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> 动画测试 </title> 
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 6s;
}

@keyframes myfirst
{from {background:red;}
    to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

成果

将 div 顺时针挪动

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> 动画测试 </title> 
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
      position:relative;
    animation:myfirst 5s linear 2s;
}

@keyframes myfirst
{0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

成果

其实也看到这些根底的动画，其实实现起来并不简单，那些简单的动画也都是通过这样根底的动画构建的。然而是不是会有一个疑难，怎么记得住这样的属性的应用呢？

这个问题和问 PS 的快捷键怎么也记不住是一样的，因为都没有常常应用，怎么记得住。等画了上百个简单动画之后，置信就会对这个动画有比拟好的理解啦！

期待后续花色的动画案例吧！所有才刚刚开始！

万能的网络

以及勤奋的本人，集体博客，GitHub 测试，GitHub

公众号 - 归子莫，小程序 - 小归博客

如果你感觉对你有帮忙的话，无妨给我点赞👍吧，继续关注也行哈！

关于css3动画:CSS3CSS3动画我离前端的炫酷又近了一步

【CSS3】CSS3 动画——我离前端的炫酷又近了一步

博客阐明

阐明

什么是动画

@keyframes 和 animation 的浏览器反对

@keyframes 规定

animation

语法

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation–play-state

案例

色彩变换

顺时钟挪动

总结

感激