CSS3 主要可以分为几个模块:边框和背景,渐变,文字特效,字体,2D/3D转换,动画(过渡动画和动画),选择器,盒模型,多列布局,用户界面。

css3动画有2类:一种是transition的,另一种是@keyframes的。

两者的区别就是,transition的动画表达是从一种状态到另一种状态,而@keyframes更加灵活,一个动画可以在不同进度表现成不同的状态。

当然,如果从操作的对象进行分类(就我目前接触的而言),我想可以分3种,一种是html元素,一种是svg的,还有就是sprites的。

最佳的入门选择就是transition。

transition意思是过渡,可以理解成从一种状态变成另一种状态。

这些状态包括很多,我自己没整理出来,暂时引用一下别人整理到的Transition 所支持的css属性.

像transition这个属性,我们经常用hover与它搭配,写好hover前后的变化,加上transition属性就可以让他们过渡了。

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

  • animation-name 规定需要绑定到选择器的 keyframe 名称。。

  • animation-duration 规定完成动画所花费的时间,以秒或毫秒计。

  • animation-timing-function 规定动画的速度曲线。

  • animation-delay 规定在动画开始之前的延迟。

  • animation-iteration-count 规定动画应该播放的次数。

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

通过 @keyframes 规则,您能够创建动画。

创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中,您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。

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

转载请注明来源: 007办公资源网站 https://www.wode007.com

css3支持动画吗?css3可以用于网页动画的展现吗的更多相关文章

  1. 利用CSS3制作网页动画

    如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...

  2. CSS3网页动画

    CSS3网页动画 概要:CSS3变形是一些效果的集合 如:平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform)他们可以分别操控元素发生平移.旋转.缩放.倾斜等变化. 网页中能够实现 ...

  3. CSS3 创建简单的网页动画 – 实现弹跳球动

    基础准备对于这个实现,我们需要一个简单的 div ,并且样式类名为 ball : HTML 代码: <div class="ball"></div> 我们将 ...

  4. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  5. 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  6. CSS3 @keyframes 规则以及animation介绍和各种动画样式说明

    一个好网站:http://www.jqhtml.com/ 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规 ...

  7. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  8. 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用

    动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...

  9. JS判断浏览器是否支持某一个CSS3属性

    1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...

随机推荐

  1. Java实现 蓝桥杯 历届试题 波动数列

    问题描述 观察这个数列: 1 3 0 2 -1 1 -2 - 这个数列中后一项总是比前一项增加2或者减少3. 栋栋对这种数列很好奇,他想知道长度为 n 和为 s 而且后一项总是比前一项增加a或者减少b ...

  2. Java实现第十届蓝桥杯质数

    试题 D: 质数 本题总分:10 分 [问题描述] 我们知道第一个质数是 2.第二个质数是 3.第三个质数是 5--请你计算 第 2019 个质数是多少? [答案提交] 这是一道结果填空的题,你只需要 ...

  3. java实现第七届蓝桥杯碱基

    碱基 题目描述 生物学家正在对n个物种进行研究. 其中第i个物种的DNA序列为s[i],其中的第j个碱基为s[i][j],碱基一定是A.T.G.C之一. 生物学家想找到这些生物中一部分生物的一些共性, ...

  4. 关于linux免密登录及ssh客户端的使用

    操作系统环境: CentOS Linux release 7.7.1908 (Core) 1.首先在linux服务器上,使用ssh-keygen命令生成密钥对文件(一直回车即可,默认使用rsa算法), ...

  5. FR6安装问题备注

    好久以前偶尔用用FR,采用安装执行文件的方式(5.3版安装没问题).及其编译包的方式都没有问题,最近在6.x提示如下(fr6_5_11_all_ent等),不知是系统原因还是文件问题,未解: ---- ...

  6. 刷一遍《剑指Offer》,你还需要这些知识!(一刷)

    因为时间紧和基础薄弱,一刷<剑指Offer>就变成了速看. 我按照: 1.看题目思考一会: 2.上网找找关于题目里不懂的知识点: 3.看评论和官方题解的解法,尽量看懂,并及时弄懂不懂的地方 ...

  7. 3 年经验的 Java 后端妹子,横扫阿里、滴滴、美团,整理出这份厚厚的 8000 字面经!

    自序 这次面试的公司有一点点多,主要是因为毕业后前两份工作找的都很草率,这次换工作就想着,emm,毕业三年了,该找个工作好好沉淀几年了. 先说下这次面试的结果吧: 到 hr 面的:阿里.美团.滴滴.金 ...

  8. ca78a_c++_字符串流在内存中的输入输出(速度快)

    /*ca78a_c++_字符串流在内存中的输入输出**字符串流:在内存中的输入输出.(在内存中进行,速度快)**文件流 :是对文件进行输入和输出.(在磁盘里面进行)istringstream(输入), ...

  9. PHP丨PHP基础知识之条件语SWITCH判断「理论篇」

    Switch在一些计算机语言中是保留字,其作用大多情况下是进行判断选择.以PHP来说,switch(开关语句)常和case break default一起使用 典型结构 switch($control ...

  10. 2020年最新78道JVM面试题总结(含答案解析和思维导图)

    前言 关于JVM系列面试知识点总结了一个思维导图,分享给大家 1.java中会存在内存泄漏吗,请简单描述. 会.自己实现堆载的数据结构时有可能会出现内存泄露. 2.64 位 JVM 中,int 的长度 ...