`

CSS动画属性笔录

    博客分类:
  • CSS
CSS 
阅读更多

【简介】

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

   一般使用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

   0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,应该始终定义 0% 和 100% 选择器

【兼容】

   IE10、Firefox 以及 Opera 均支持动画属性,而Chrome 和 Safari 需要前缀 -webkit-

  优点:关于动画是CSS3引入的,可以在许多网页中取代动画图片、Flash 动画以及 JavaScript

【主要内容】

   1. CSS3的@keyframes 规则;

   2. animation 属性及它所配置的6个动画属性

      ①animation-name动画名;②animation-duration动画持续时间;③animation-timing-function定时功能;

      ④animation-delay动画延迟;⑤animation-iteration-count动画迭代计数;⑥animation-direction动画方向

【详解】

 一 . CSS3的@keyframes 规则

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

兼容:

  目前浏览器都不支持 @keyframes 规则

  Firefox 支持替代的 @-moz-keyframes 规则;Opera 支持替代的 @-o-keyframes 规则;Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则

动画绑定选择器:

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

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

  ①规定动画的名称;②规定动画的时长

  注意:必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0

语法:

@keyframes animationname动画名称 {keyframes-selector时长 {css-styles;样式}}

 二 . animation 属性

 它所有动画属性的简写属性,除了 animation-play-state 属性

 作用:将动画与文档元素(div等dom)绑定

 animation 属性是一个简写属性,用于设置六个动画属性:

 ①animation-name动画名;②animation-duration动画持续时间;③animation-timing-function定时功能;

 ④animation-delay动画延迟;⑤animation-iteration-count动画迭代计数;⑥animation-direction动画方向

【兼容】IE10、Firefox 以及 Opera 支持6个动画属性,Safari 和 Chrome 支持替代的 -webkit+...属性

下面依次介绍6个动画属性:
 ①animation-name动画名-----规定需要绑定到选择器的 keyframe 名称;

 ②animation-duration动画持续时间------规定完成动画所花费的时间,以秒或毫秒计(默认值是 0,意味着没有动画效果);

 ③animation-timing-function动画定时功能------规定动画的速度曲线,速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

   animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。能够在该函数中使用自己的值,也可以预定义的值:

值 描述 测试
linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始,然后加快,在结束前变慢。 测试
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。 测试

 ④animation-delay动画延迟------ 定义动画何时开始,属性值以秒或毫秒计

   提示:允许负值,例-2s 使动画马上开始,但会从开始跳过 2 秒直接进入动画周期。默认值是 0

 ⑤animation-iteration-count动画迭代计数------规定动画应该播放的次数

 属性值:n------定义动画播放次数的数值;infinite------规定动画应该无限次播放

 ⑥animation-direction动画方向------规定是否应该轮流反向播放动画

 属性值:normal------默认值,动画正常播放;alternate------动画轮流反向播放(在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放),例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布</title>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            background:red;
            position:relative;
            animation:myfirst 5s infinite;
            animation-direction:alternate;

            /* Safari and Chrome */
            -webkit-animation:myfirst 5s infinite;
            -webkit-animation-direction: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;}
        }
        @-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><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 
                             animation-direction 属性。</p>
<div></div>
</body>
</html>

 三 . 其他动画属性

 ①animation-play-state动画播放状态------规定动画是否正在运行或暂停,默认是 "running"

 属性值:paused------规定动画已暂停;running------规定动画正在播放

 ②animation-fill-mode动画填充模式------规定对象动画时间之外的状态,指的是动画在播放之前或之后,其动画效果是否可见

通俗的讲就是动画结束之后保持什么状态

(1)none 表示不设置结束之后的状态,默认情况下回到跟初始状态一样;

(2)forwards 表示将动画元素设置为整个动画结束时的状态。;

(3)backwards 明确设置动画结束之后回到初始状态;

(4)both 表示设置为结束或者开始时候的状态。一般都是回到默认状态

 

 

分享到:
评论

相关推荐

    数据库基础测验20241113.doc

    数据库基础测验20241113.doc

    微信小程序下拉选择组件

    微信小程序下拉选择组件

    DICOM文件+DX放射平片-数字X射线图像DICOM测试文件

    DICOM文件+DX放射平片—数字X射线图像DICOM测试文件,文件为.dcm类型DICOM图像文件文件,仅供需要了解DICOM或相关DICOM开发的技术人员当作测试数据或研究使用,请勿用于非法用途。

    Jupyter Notebook《基于双流 Faster R-CNN 网络的 图像篡改检测》+项目源码+文档说明+代码注释

    <项目介绍> - 基于双流 Faster R-CNN 网络的 图像篡改检测 - 不懂运行,下载完可以私聊问,可远程教学 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------

    使用epf捕获没有CA证书的SSLTLS明文(LinuxAndroid内核支持amd64arm64).zip

    c语言

    (源码)基于Arduino的天文数据库管理系统.zip

    # 基于Arduino的天文数据库管理系统 ## 项目简介 本项目是一个基于Arduino的天文数据库管理系统,旨在为Arduino设备提供一个完整的天文数据库,包括星星、星系、星团等天体数据。项目支持多种语言的星座名称,并提供了详细的天体信息,如赤道坐标、视星等。 ## 项目的主要特性和功能 星座目录包含88个星座,提供拉丁语、英语和法语的缩写和全名。 恒星目录包含494颗亮度达到4等的恒星。 梅西耶目录包含110个梅西耶天体。 NGC目录包含3993个NGC天体,亮度达到14等。 IC目录包含401个IC天体,亮度达到14等。 天体信息每个天体(不包括星座)提供名称、命名、相关星座、赤道坐标(J2000)和视星等信息。 恒星额外信息对于恒星,还提供每年在赤经和赤纬上的漂移以及视差。 ## 安装使用步骤 1. 安装库使用Arduino IDE的库管理器安装本项目的库。 2. 解压数据库将db.zip解压到SD卡中。

    (源码)基于JSP和SQL Server的维修管理系统.zip

    # 基于JSP和SQL Server的维修管理系统 ## 项目简介 本项目是一个基于JSP和SQL Server的维修管理系统,旨在提供一个高效、便捷的维修管理解决方案。系统涵盖了从维修订单的创建、管理到配件的录入、更新等多个功能模块,适用于各类维修服务行业。 ## 项目的主要特性和功能 1. 用户管理 管理员和客户的注册与登录。 管理员信息的管理与更新。 客户信息的创建、查询与更新。 2. 维修订单管理 维修订单的创建、查询与更新。 维修回执单的创建与管理。 3. 配件管理 配件信息的录入与更新。 配件库存的管理与查询。 4. 评价与反馈 客户对维修服务的评价记录。 系统反馈信息的收集与管理。 5. 数据加密与安全 使用MD5加密算法对用户密码进行加密存储。 通过过滤器实现登录验证,确保系统安全。 ## 安装使用步骤

    devecostudio-windows-3.1.0.501.zip

    HUAWEI DevEco Studio,以下简称DevEco Studio)是基于IntelliJ IDEA Community开源版本打造,为运行在HarmonyOS和OpenHarmony系统上的应用和服务(以下简称应用/服务)提供一站式的开发平台。 作为一款开发工具,除了具有基本的代码开发、编译构建及调测等功能外,DevEco Studio还具有如下特点: - 高效智能代码编辑:支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能,提升代码编写效率。更多详细信息,请参考[编辑器使用技巧] - 低代码可视化开发:丰富的UI界面编辑能力,支持自由拖拽组件和可视化数据绑定,可快速预览效果

    《计算机视觉技术》实验报告-8.1提取车辆轮廓

    《计算机视觉技术》实验报告-8.1提取车辆轮廓

    springboot小徐影城管理系统(代码+数据库+LW)

    随着现在网络的快速发展,网上管理系统也逐渐快速发展起来,网上管理模式很快融入到了许多生活之中,随之就产生了“小徐影城管理系统”,这样就让小徐影城管理系统更加方便简单。 对于本小徐影城管理系统的设计来说,系统开发主要是采用java语言技术,在整个系统的设计中应用MySQL数据库来完成数据存储,具体根据小徐影城管理系统的现状来进行开发的,具体根据现实的需求来实现小徐影城管理系统网络化的管理,各类信息有序地进行存储,进入小徐影城管理系统页面之后,方可开始操作主控界面,主要功能包括管理员:首页、个人中心、用户管理、电影类型管理、放映厅管理、电影信息管理、购票统计管理、系统管理、订单管理,用户前台;首页、电影信息、电影资讯、个人中心、后台管理、在线客服等功能。 本论文主要讲述了小徐影城管理系统开发背景,该系统它主要是对需求分析和功能需求做了介绍,并且对系统做了详细的测试和总结。具体从业务流程、数据库设计和系统结构等多方面的问题。望能利用先进的计算机技术和网络技术来改变目前的小徐影城管理系统状况,提高管理效率。

    C++与Matlab实现SIFT特征提取算法+项目源码+文档说明+代码注释

    <项目介绍> - SIFT特征提取算法C++与Matlab实现 - 不懂运行,下载完可以私聊问,可远程教学 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------

    (1991-2024年)国家自然、社科基金部分名单(含部分标书)(最新!!!)

    数据介绍 数据名称:国家自然、社科基金部分名单 数据年份:1991-2024年 样本数量:10万+ 数据格式:PDF、excel

    卓晴-信号与系统课件.pdf

    卓晴

    as-bundled-clients

    as-bundled-clients

    学习时最后的资料包括面试等信息

    学习时最后的资料包括面试等信息

    (源码)基于Spring Boot和Ant Design的雨选课系统.zip

    # 基于Spring Boot和Ant Design的雨选课系统 ## 项目简介 雨选课系统是一个基于Spring Boot和Ant Design框架构建的前后端分离的选课系统。该系统实现了学生选课、成绩查询、教师成绩修改、课程编辑、课程新增等功能。登录信息使用Redis存储,并支持课程图片的上传功能。 ## 项目的主要特性和功能 1. 用户登录与权限管理 学生、教师和管理员分别有不同的登录权限。 登录信息使用Redis进行存储。 2. 课程管理 学生可以查看可选课程列表,并进行选课和退选操作。 教师可以查看自己教授的课程,并修改学生成绩。 管理员可以编辑和新增课程。 3. 成绩管理 学生可以查询自己的成绩。 教师可以修改学生的成绩。 4. 图片上传 支持课程图片的上传和展示。 5. 日志记录 系统记录请求和响应的日志信息,便于问题追踪和性能分析。

    数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)

    数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目),含有代码注释,满分大作业资源,新手也可看懂,期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。该项目可以作为课程设计期末大作业使用,该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅

    江苏镇江两座小桥的技术状况评估与维修建议

    内容概要:本文针对镇江市丹徒区辛丰镇的两座小型桥梁(大叶二组滚水坝桥与东联组桥)进行了详细的技术状况评定和现状调查。主要内容包括:桥梁的基本参数描述、桥梁各部分的具体检查结果以及存在的具体病害及其原因分析,同时依据《公路桥梁技术状况评定标准》对每座桥梁分别给出了综合评分和技术状况等级,并提出了具体的维护与修复建议。大叶二组滚水坝桥技术状况良好(2类),但需要解决桥面铺装裂缝和桥墩的混凝土剥落问题;而东联组桥则需重点关注桥面施工不完整及护栏损坏等问题。 适用人群:桥梁管理人员、维护工作人员及城市基础设施规划相关人员。 使用场景及目标:适用于中小跨度桥梁的常规检查与维修决策制定过程中,旨在帮助专业人士快速掌握桥梁的实际状态,确保桥梁安全可靠运行。 其他说明:文中附有多张实拍图片用于直观展示桥梁现状及存在问题。

    基于套接字API开发的高性能高稳定性跨平台MQTT客户端,可以在嵌入式设备FreeRTOS LiteOS RTThre.zip

    c语言

    【Unity 天气系统插件】Enviro 3 - Sky and Weather 高度可定制的云、雾和光照系统

    文件名:Enviro 3 - Sky and Weather v3.1.6b.unitypackage Enviro 3 - Sky and Weather 是一款功能强大的 Unity 插件,专门用于模拟逼真的天空、天气和环境效果。它适用于需要动态天气和日夜循环的游戏或应用,如开放世界 RPG、模拟类游戏等。Enviro 3 提供了大量的设置选项和自定义功能,帮助开发者在 Unity 中创建沉浸式的自然环境效果。 以下是 Enviro 3 - Sky and Weather 的一些关键特点和功能介绍: 1. 动态天气系统 天气变化:支持多种天气效果,如晴天、阴天、雨天、雪天、雾天、暴风雨等,所有天气效果可以动态切换,使游戏环境更加生动。 天气事件:允许开发者设置特定的天气事件,如风暴、雷电等,添加到游戏中的特殊场景或事件。 湿度与温度控制:可以根据天气变化动态控制湿度和温度,影响环境效果和玩家体验。 2. 日夜循环系统 动态时间系统:Enviro 3 支持实时的日夜循环,包括昼夜的过渡,太阳和月亮的运动轨迹。 光照调整:随着时间变化,Enviro 3 会自动调整环境光、

Global site tag (gtag.js) - Google Analytics