其他分享
首页 > 其他分享> > CSS3动画（了解）

CSS3动画（了解）

作者：互联网

动画（了解）

1、CSS3 @keyframes 规则

要创建 CSS3 动画，首先需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

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

2、CSS3 动画

动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数。

用百分比来规定变化发生的时间

或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

当在 @keyframes 创建动画，需要把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

  • 规定动画的名称

  • 规定动画的时长

3、动画练习

3.1 练习一

将动画捆绑到div元素，时长为3s

.css代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>红变黄动画练习</title>
    <style>
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 3s;
	-webkit-animation:myfirst 3s; /* 添加Safari and Chrome兼容 */
}

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

@-webkit-keyframes myfirst /* 添加Safari and Chrome兼容 */
{
	from {background:red;}
	to {background:yellow;}
}
</style>
</head>
<body>

<div></div>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

</body>
</html>

知识点总结

  1. from {background:red;}
to {background:yellow;}

    from等同于0%即动画的开始，to等同于100%即动画的完成

  2. -webkit-animation:myfirst 3s;
@-webkit-keyframes myfirst

    有些浏览器是不支持这种css3动画的，所以要在.css代码中添加这些浏览器的兼容

    -webkit- 用于Chrome和Safari浏览器

    -moz- 用于Firefox浏览器

    -o- 用于Opera

  3. 当在 @keyframes 创建动画，需要把它绑定到一个选择器，否则动画不会有任何效果

  4. 一定要规定动画时间，否则不生效，因为动画时间默认为0

  5. 为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

  6. 动画完成以后元素会恢复初始样式

3.2 练习二

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变

.css代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动画练习二</title>
    <style>
div
{
   width:100px;
   height:100px;
   background:red;
   animation:myfirst 5s;
   -moz-animation:myfirst 5s; /* Firefox */
   -webkit-animation:myfirst 5s; /* Safari and Chrome */
   -o-animation:myfirst 5s; /* Opera */
}

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

@-moz-keyframes myfirst /* Firefox */
{
   0%   {background:red;}
   25%  {background:yellow;}
   50%  {background:blue;}
   100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
   0%   {background:red;}
   25%  {background:yellow;}
   50%  {background:blue;}
   100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
   0%   {background:red;}
   25%  {background:yellow;}
   50%  {background:blue;}
   100% {background:green;}
}
</style>
</head>
<body>

<div></div>

<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>


<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

</body>
</html>

3.3 练习三

改变背景色的同时变化位置

.css代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动画练习三</title>
    <style>
div
{
    width:100px;
    height:100px;
    background:pink;
    position:relative;
    animation:catton 6s;
    -webkit-animation:catton 6s;
}

@keyframes catton
{
    0%      {background:pink;left:0px;top:0px;}
    20%     {background:orange;left:300px;top:0px;}
    40%     {background:yellow;left:450px;top:150px;}
    60%     {background:green;left:300px;top:300px;}
    80%     {background:aqua;left:0px;top:300px;}
    100%    {background:pink;left:0px;top:0px;}
}
@-webkit-keyframes catton
{
    0%      {background:pink;left:0px;top:0px;}
    20%     {background:orange;left:300px;top:0px;}
    40%     {background:yellow;left:450px;top:150px;}
    60%     {background:green;left:300px;top:300px;}
    80%     {background:aqua;left:0px;top:300px;}
    100%    {background:pink;left:0px;top:0px;}
}
</style>
</head>
<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>
</html>

4、CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3

练习一

运行myfirst动画，设置所有动画属性

.css代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>练习设置所有动画属性</title>
    <style>
div
{
   width:100px;
   height:100px;
   background:red;
   position:relative;
   animation-name:myfirst;
   animation-duration:5s;              /*完成一个周期耗时为5s，默认为0*/
   animation-timing-function:linear;   /*动画速度曲线为linear，默认为ease*/
   animation-delay:2s;                 /*动画在开启网页后2s开始播放，默认为0*/
   animation-iteration-count:infinite; /*动画播放次数为无穷，默认为1*/
   animation-direction:alternate;      /*动画循环在下个周期逆向播放，默认为normal*/
   animation-play-state:running;       /*动画是否正在运行或暂停，默认为"running"*/
   /* Safari and Chrome: */
   -webkit-animation-name:myfirst;
   -webkit-animation-duration:5s;
   -webkit-animation-timing-function:linear;
   -webkit-animation-delay:2s;
   -webkit-animation-iteration-count:infinite;
   -webkit-animation-direction:alternate;
   -webkit-animation-play-state:running;
}

@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;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
   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>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>
</html>

练习二

与上面的动画相同，但是使用了简写的动画 animation 属性：

.css代码

<!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 infinite alternate;
   /* Firefox: */
   -moz-animation:myfirst 5s linear 2s infinite alternate;
   /* Safari and Chrome: */
   -webkit-animation:myfirst 5s linear 2s infinite alternate;
   /* Opera: */
   -o-animation:myfirst 5s linear 2s infinite alternate;
}

@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;}
}

@-moz-keyframes myfirst /* Firefox */
{
   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;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
   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;}
}

@-o-keyframes myfirst /* Opera */
{
   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>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>
</html>

标签：CSS3,动画,top,了解,background,0px,animation,left
来源： https://www.cnblogs.com/xypersonal/p/16195972.html