ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

CSS3动画（了解）

2022-04-26 18:32:48  阅读：186  来源： 互联网

标签：CSS3 动画 top 了解 background 0px animation left


动画（了解）

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有