CSS3 基础（7）—— CSS3动画（animation）

其他 2018-10-23 10:31:18 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39141044/article/details/82352789

一、动画animation

人类拥有“视觉停留”的特效，也就是人的眼睛看到东西，会在视网膜上存在0.34不会消失。
在前一幅画在脑子里消失前播放下一幅，就会给人造成一种流畅的视觉变化效果。

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


兼容性

ie10+、firefox16+、chrome43+、safari9+、opera30+、android（-webkit-）
手机设备的浏览器再使用css3动画时，要加上webkit前缀。

（一）.动画的属性

  1. animation-name 设置动画应用的名称
  2. animation-duration 设置动画持续时间
  3. animation-timing-function 设置对象动画的过渡类型
  4. animation-delay 设置动画的延迟
  5. animation-iteration-count 设置动画循环次数
  6. animation-direction 设置动画的运动方向（正放还是倒放）
  7. animation-fill-mode 设置对象不播放动画时的状态
  8. animation-play-state 设置动画的播放和暂停
  9. animation 综合写法

1.animation-name

设置对象所应用的动画名称
必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

语法
animation-name：<single-animation-name>[,<single-animation-name>]*


2.animation-duration 动画持续时间

索或设置对象动画的持续时间。

语法
animation-duration: time;

参数说明：time指定动画播放完成花费的时间。默认为0，意味这没有动画效果。
动画必须要写的属性，动画的名称和时间。name和duration。

例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div {
            font-family: 'Microsoft Yahei';
            font-size: 60px;
            font-weight: bold;
            line-height: 600px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 800px;
            height: 600px;
            margin: auto;
            text-align: center;
            border: 5px solid #000;
            border-radius: 50%;
            animation-name: banner;
            animation-duration: 5s;
       }
       @keyframes banner{
            from{opacity: 0}
            to{opacity: 1}
       }


   </style>
</head>
<body>
    <div>苟利国家生死以</div>
</body>
</html>


3.animation-timing-function 设置动画过渡类型

语法

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | 
                            steps | cubic-bezier

参数说明
常用的

  • linear:线性过度。
  • ease:平滑过度。
  • ease-in:由慢到快。
  • ease-out:由快到慢。
  • ease-in-out:由慢到快又变慢。

不常用：

  • step-start等同于steps(1,start);
  • step-end等同于steps(1,end);
  • steps
  • cubic-bezier(num,num,num,num)贝塞尔曲线取值0-1之间。

4.animation-delay 设置动画延时

语法

animation-delay：time（单位可以是s也可以是ms）

参数说明：
可选。定义动画开始前等待时间，以秒或毫秒计数，默认值为0。

时间可以为负值，意思是跳过指定的时间。

例如
            animation-duration: 3s; //当前动画执行3秒
            animation-delay: -2s; //动画立即开始，并跳过前2秒的动画，直接显示第3秒的动画

当前动画

PS：延迟不算动画周期耗时，动画完成一个周期耗时是animation-duration的值。

5.animation-iteration-count 设置动画循环次数

检索或设置对象动画的循环次数。

语法
animation-iteration-count: infinite（无限循环） | <number>;

参数说明：<number>为数字，其默认值为1；infinite为无限次数循环。只循环duration的期间。delay时间不算在内。

例子

旋转的太极图

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            width: 400px;
            height: 400px;  
            margin: auto;
            border: 1px solid red;
            border-left: 200px solid red;
            border-radius: 50%;
            transform-origin: 50% 50%;
            animation-name: rotate;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;

        }
        @keyframes rotate{
            from{transform: rotate(0deg);}
            to{transform: rotate(360deg);}
        }

        div::before{
            content: '';
            display: block;
            position: absolute;
            left: -100px;
            width: 39px;
            height: 39px;
            border: 80px solid red;
            background-color: rgb(255, 255, 255);
            border-radius: 50%;
        }
         div::after{
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: -100px;
            width: 39px;
            height: 39px;
            border: 80px solid rgb(255, 255, 255);
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


6.animation-direction 设置动画的方向

检索或设置对象动画在循环中是否反向运动。

语法
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
参数说明
  • normal：正常方向；
  • reverse：反方向运行；
  • alternate：动画现正常运行在反方向运行，并持续交替运行；
  • alternate-reverse：动画先反运行再正方向运行，并持续交替运行。
  • 后两种需要animation-iteration-count设置为infinite；也就是循环。若没有，后两种则失去作用。


7.animation-fill-mode 设置动画不播放时的状态

动画结束后会变成初始的状态，而有时候我们希望，维持动画结束时的状态。
设置当动画不播放时（当动画完成或当动画由延迟未开始播放时），要应用到元素的样式。

语法
animation-fill-mode: none | forwards | backwards | both | initial | inherit;
参数说明
  • none：默认值。不设置对象动画之外的状态；
  • forwards：设置对象状态为动画结束时的状态。保持动画结束的样子
  • backwards：设置对象状态为动画开始时的状态。保持动画开始的样子
  • both：设置对象状态为动画结束或开始的状态。
例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div {
            font-family: 'Microsoft Yahei';
            font-size: 60px;
            font-weight: bold;
            line-height: 600px;
            position: absolute;
            top: -1000px;
            right: 0;
            left: 0;
            width: 800px;
            height: 600px;
            margin: auto;
            text-align: center;
            border: 5px solid #000;
            border-radius: 50%;
            animation-name: disp;
            animation-duration: 2s;
            animation-delay: 2s;
            animation-fill-mode: forwards;
       }
       @keyframes disp{
            from{top: -1000px}
            to{top: 200px}
       }
   </style>
</head>
<body>
    <div>苟利国家生死以</div>
</body>
</html>

这句诗在2秒后会下拉显示在屏幕中，并在动画结束后不会消失。

8.animation-play-state 设置动画的播放和暂停

指定动画是否正在运行或已暂停。一般配合js或者用户行为伪类（:hover等）使用，控制动画的播放或者暂停。

语法：
animation-play-state：paused | running;
参数说明
  • paused：指定暂停动画；
  • running：默认值，指定正在运行的动画。从暂停部分开始继续运行。
例子

使用上面的例子：旋转的太极图，鼠标悬浮动画暂停。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-5</title>
    <style type="text/css">
        div {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            width: 400px;
            height: 400px;  
            margin: auto;
            border: 1px solid red;
            border-left: 200px solid red;
            border-radius: 50%;
            transform-origin: 50% 50%;
            animation-name: rotate;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            cursor: pointer;
        }
        @keyframes rotate{
            from{transform: rotate(0deg);}
            to{transform: rotate(360deg);}
        }
        /*伪类元素*/
        div::before{
            content: '';
            display: block;
            position: absolute;
            left: -100px;
            width: 39px;
            height: 39px;
            border: 80px solid red;
            background-color: rgb(255, 255, 255);
            border-radius: 50%;
        }
         div::after{
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: -100px;
            width: 39px;
            height: 39px;
            border: 80px solid rgb(255, 255, 255);
            background-color: red;
            border-radius: 50%;
        }
        /*/伪类元素*/
        /*用户行为伪类*/
        div:hover{
            animation-play-state: paused;
        }
        /*/用户行为伪类*/
    </style>
</head>
<body>
    <div></div>
</body>
</html>

这里写图片描述


9.animation 综合写法

为了减少浏览器兼容下的代码量，推荐使用简写。

语法
animation：name duration timing-function delay iteration-count direction fill-mode play-state

注意：综合写法，顺序不是特别重要，但是name和duration是必须的。综合写法中的第一个时间被默认为是duration，第二个时间才会被认为是delay。

举个栗子
animation: run 10s infinite linear;  //意思就是播放名为run的动画，动画周期10s,线性方式，无线循环。
animation: run linear 10s infinite;  //效果和上面的是一样的。

如果想延迟播放，必须加上第二个时间
animation: run 10s 2s infinite linear;  //意思就是播放名为run的动画，动画周期10s,延迟2秒播放，线性方式，无线循环。



二、关键帧@keyframes

@keyframes关键帧：可以指定任何顺序排列来决定Animatioin动画变化的关键位置。
使用@keyframes规则创建动画，通过逐步改变从一个css样式设定到另一个。
在动画过程中可以通过@keyframes规则多次更改css样式的设定。

语法：
@keyframes animationname {
    keyframes-selector{ css-styles; }
}
参数说明
  • animatioinname：必写项。定义animation的名称。
  • keyframes-selector：必写项。动画持续时间的百分比，0~100%、from（0%）、to（100%）。

  • css-styles：必写项。一个或多个合法的css样式属性。

  • 标准格式写到最后。有通用方法尽量用通用方法。放到最后。
    手机端兼容：@-webkit-keyframes

例子

使用关键帧我们可以更好的设置动画中的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-9</title>
    <style type="text/css">
        div {
            font-family: Arial;
            font-size: 72px;
            font-weight: bold;
            position: absolute;
            top: 300px;
            right: 0;
            left: 0;
            width: 30px;
            height: 30px;
            margin: auto;
            transform: rotate(90deg);

            -webkit-animation: down 1s infinite linear alternate;
            -moz-animation: down 1s infinite linear alternate;
            -ms-animation: down 1s infinite linear alternate;
            -o-animation: down 1s infinite linear alternate;
            animation: down 1s infinite linear alternate;
        }
        @-webkit-keyframes down{
            0%{transform: translateY(0) rotate(90deg);}
            75%{transform: translateY(30px) rotate(90deg);}
            100%{transform: translateY(30px) rotate(90deg);}
        }
        @-moz-keyframes down{
            0%{transform: translateY(0) rotate(90deg);}
            75%{transform: translateY(30px) rotate(90deg);}
            100%{transform: translateY(30px) rotate(90deg);}
        }
        @-ms-keyframes down{
            0%{transform: translateY(0) rotate(90deg);}
            75%{transform: translateY(30px) rotate(90deg);}
            100%{transform: translateY(30px) rotate(90deg);}
        }
        @-o-keyframes down{
            0%{transform: translateY(0) rotate(90deg);}
            75%{transform: translateY(30px) rotate(90deg);}
            100%{transform: translateY(30px) rotate(90deg);}
        }
        @keyframes down{
            0%{transform: translateY(0) rotate(90deg);}
            75%{transform: translateY(30px) rotate(90deg);}
            100%{transform: translateY(30px) rotate(90deg);}
        }
    </style>
</head>
<body>
    <div>&gt;</div>
</body>
</html>

下拉箭头弹跳的效果，在底部停留.5s。



三、will-change属性

will-change属性：提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置（通知GPU去完成动画）。
也就是说will-change属性可以将页面动画效果让浏览器交给GPU去处理，减轻CPU的压力。

语法
will-change：auto | scroll-position | contents | <custom-ident> | <animateable-feature>;
参数说明
  • auto：此关键字表示没有特定的意图，适用于它通常所作的任何启发式和优化。
  • scroll-position：表示将要改变元素的滚动位置。
  • contents：表示将要改变元素的内容。
  • <custom-ident>：明确指定将要改变的属性与给定的名称。如：transform。这种在缓存中改变。性能更高些，建议使用，
  • <animateable-feature>：可动画的一些特征值，比如left、top、margin等。这种时刻都在改变值，非常消耗性能。
    will-change：left/top/margin；
兼容性

ie13+、firefox47+、chrome49+、safari9.1+、opera39+、iOS9.3+、Android52+、安卓对应chrome。ios对应safari。
兼容只需要写-webkit-、-moz-、不带前缀的3个即可。

PS：不能滥用、提前申明、remove。

猜你喜欢

转载自blog.csdn.net/weixin_39141044/article/details/82352789
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022