一、css3过渡知识

    (一)、概述

        1、CSS3过渡是元素从一种样式逐渐改变为另一种的效果。

           2、实现过渡效果的两个要件:

          规定把效果添加到那个css属性上。

          规定效果时长

      定义动画的规则: 过渡transition  (作用) 将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”

     (二)、transform转化有以下几种:

translate()移动,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。

rotate()旋转,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

scale()缩放,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:

skew()倾斜,包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。

matrix()混合,matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

每种转化都还有对应的3d版本

注意:闭合的内联元素不支持转化,过渡和动画:如<span>、<small>、<i>等。可以通过添加样式 display: inline-block 或 display: block 来转化成块级元素。

     (三)、transition属性

   语法 :   {transition: 属性名 持续时间 过渡方法}

transition-property     属性的名字(如果是一个属性就带有这个属性的名字;如果是多个属性,属性名之间用逗号隔开;如果是所有属性,用all表示即可。)表示对哪个属性进行变化。

  二、css3动画基础知识

        (一)、CSS3中的动画实现的是什么效果

        动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。动画效果是通过animation属性来完成的。

          用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。

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

        实现动画效果两要件:

1、首先要定义一个动画  ,定义一个@keyframes  规则(关键帧)

2、调用动画    动画定义好之后,使用animation 属性调用动画

 (二)、animation属性设置动画效果

        • @keyframes 规定动画
        • animation-name  规定@keyframes 动画名称
        • animation-duration  规定一个动画完成的周期所花费的秒或毫秒。默认值为0。
        • animation-timing-function 规定动画的速度曲线。默认值为ease
        • animation-delay 动画开始前等待的时间。取值可为负(-2s 动画跳过 2 秒进入动画周期)
        • animation-iteration-count  规定动画播放的次数。默认值为1
        • animation-direction 规定动画是否在下一周期逆向地播放。默认值是normal
        • animation-play-state  规定动画是否正在运行或暂停。默认值是running
        • animation-fill-mode  规定对象动画时间之外的状态
      • linear    匀速(线型过渡)
      • ease      先慢后快再慢
      • ease-in  先慢后快
      • ease-out 先快后慢
      • ease-in-out  开头慢结尾慢,中间快

动画制作过程

1.通过@keyframes规则创建动画

/*创建动画,字体颜色由红变蓝 */
@keyframes changeColor {
from { color: red; }
to { color: blue; }
}

2.元素绑定动画

span {
display: inline-block; /*内联元素要转成block元素 */
animation: changeColor 1s linear; /*绑定动画,并设置动画时间和执行曲线 */
}

3.动画还可以使用百分比来更加精细的控制动画流程:

@keyframes changeColor {
0% {color: red;}
25% {color: yellow;}
50% {color: green;}
75% {color: pickle;}
100% {color: blue;}
}

前端:css3的过渡与动画的更多相关文章

  1. css3的过渡、动画、2D、3D效果

    浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...

  2. css3 转换 过渡 及动画

    转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...

  3. css3的过渡和动画的属性介绍

    一.过渡 什么是过渡? 过渡是指:某元素的css属性值在一段时间内,平滑过渡到另外一个值,过渡主要观察的是过程和结果. 设置能够过渡的属性: 支持过渡的样式属性,颜色的属性,取值为数值,transfo ...

  4. 重新想,重新看——CSS3变形,过渡与动画①

    学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...

  5. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. 重新想,重新看——CSS3变形,过渡与动画④

    最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...

  7. CSS3 过渡、动画、多列、用户界面

    CSS3 过渡.动画.多列.用户界面 transition过渡 transition: transition-property transition-duration transition-timin ...

  8. 常用到用css3实现的转换,过渡和动画

    为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...

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

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

随机推荐

  1. vector删除特定元素

    删除vector中小于20的元素,注意要使迭代器失效,不能简单的删除. #include <iostream>#include <vector>using namespace ...

  2. ABBYY FineReader 15 安装教程

    ABBYY FineReader 是一款出名的OCR文字识别工具,它包含文档转换.数据捕获等功能,文字识别率较高.能够带来快速.简单.易用的文字识别体验,从而提高工作效率.下面就为大家讲解ABBYY ...

  3. CorelDRAW软件的出血位详解

    出血位,一种常见的印刷术语,在印刷品中,设计的图形一般比成品尺寸要大,会加一些延伸,专门用来给生产工艺中的公差范围使用,以避免最后裁切的成品中有白边或是裁到内容.多出来的部分在印刷后要被裁掉,这部分就 ...

  4. 看完这篇还不会 Elasticsearch 搜索,那我就哭了!

    本文主要介绍 ElasticSearch 搜索相关的知识,首先会介绍下 URI Search 和 Request Body Search,同时也会学习什么是搜索的相关性,如何衡量相关性. Search ...

  5. Java8 Stream:2万字20个实例,玩转集合的筛选、归约、分组、聚合

    点波关注不迷路,一键三连好运连连! 先贴上几个案例,水平高超的同学可以挑战一下: 从员工集合中筛选出salary大于8000的员工,并放置到新的集合里. 统计员工的最高薪资.平均薪资.薪资之和. 将员 ...

  6. javaAgent与pinpoint

    转载:https://www.cnblogs.com/kokov/p/12120033.html 项目中pinpoint应用:

  7. uni搜索功能实现

    uni搜索功能的实现

  8. Alpha冲刺-第六次冲刺笔记

    Alpha冲刺-冲刺笔记 这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/2018SE2 这个作业要求在哪里 https://edu.cnblogs. ...

  9. java47

    1. 1.List集合根据角标获取元素 import java.util.ArrayList; import java.util.List; public class List集合 { @Suppre ...

  10. java简单的实现搜索框的下拉显示相关搜索功能

    最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...