一、什么是过渡

鼠标移动到一个元素上面，元素发生变化，鼠标移走，变化消失；这是一个动态的过程，这就是过渡。在CSS过渡中允许你在给定的时间内平滑地改变属性值。

通过过渡可以指定一个属性发生变化的切换方式；

通过过渡可以创建一些非常好的效果，提升用户体验感；

使用过渡就是使用我们transition这个属性；

二、过渡的属性

1、transition 【复合写法】用于向四个过渡属性设置为单一属性

2、transition-duration        规定过渡效果要持续多少秒/毫秒，属性值：时间【必须属性】

3、transition-delay        规定过渡效果的延迟（以秒记）属性值：时间

4、transition-property        规定过渡效果所针对的CSS属性的名称

5、transition-timing-function        规定过渡效果的速度曲线

这些属性值部分顺序，但第一个时间必定是过渡花费时间。持续时间第二个时间才是过渡延迟时间。

transition-timing-function 属性可以使用的属性值

ease	规定过渡效果，先缓慢开始，然后加速，然后缓慢的结束（默认）
linear	从开始到结束具有相同速度的过渡效果，匀速运动
ease-in	缓慢开始，加速运动
ease-out	缓慢结束，减速运动
ease-in-out	以慢速开始和结束的过渡效果
cubic-bezier（n,n,n,n）	允许你在三次贝塞尔函数中定义自己的值
step（n）	分步执行

案列展示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.contain {width: 132px;height: 271px;background-color: pink;margin: 100px auto;background-image: url(./one.webp);/* transition: .1s steps(3); */animation-name: run;animation-duration: 1.2s;animation-timing-function: steps(3);animation-iteration-count: infinite;}/* .contain:hover {background-position: -396px 0;} */@keyframes run {from {background-position: 0px 0}to {background-position: -396px 0}}</style>
</head><body><div class="contain"></div>
</body></html>

三、什么是动画

CSS可实现HTML元素的动画效果

动画使元素逐渐从一种样式转变为另一种样式，可以随意更改任意数量的CSS属性，相对于以前的动画片一样，需要很多张定格图像，然后连贯起来，那么这样一个连贯就是我们的动画，在HTML中可以简单的设置一些动画，那么其中一张纸定格图片就是我们的关键帧。

四、动画的属性

动画属性说明
@keyframes	规定动画模式，设置关键帧
animation	设置所有动画的简写属性，只有时间顺序要求
animation-name	规定@keyframes动画的名称，必须
animation-duration	动画完成一个周期应花费的时间，必须
animation-delay	动画开始的延迟
animation-iteration-count	动画应播放的次数
animation-direction	动画是向前播放还是向后播放还是交替播放
animation-timing-function	动画的速度曲线，与过渡的属性值一样
animation-fill-mode	元素在不播放动画时的样式，（开始结束或两者同时）
animation-play-state	动画时运行还是暂停

1、animation-iteration-count【动画迭代次数，规定动画播放次数】

自然数【1 2 3 ...】

infinite【无限执行】

2、animation-direction【动画的执行方向】

normal 默认值，从from-to

reverse 从to-from，每次都是

alternate 从from-to，回来的时候反向执行

alternate-reverse 从to-from执行，回来反向执行

3、animation-play-state【动画的执行状态】

running 默认值，动画执行

paused 动画暂停

4、animation-fill-mode【元素播放前的样式】

none 默认值，动画执行完后，回到原来样式

forwards 执行完后，展示to的样式

backwards 延时等待，元素会显示from样式

both 介个了forwards和backwards

五、网页logo的设置

网页标题一般都是使用专门的图片，是.iocn结尾的图片。

ico图标的生产网址可以参照：https://bitbug.net

在网页头部标签中使用：<link rel="shortcut icon" href="图标文件">

    <link rel="shortcut icon" href="favicon.ico">

六、什么是形变

属于2D/3D上的装换、变形效果，不是一个动画，就是一个变形。比如正方形变平行四边形，在变为圆形，都是形状变成另一个形状。但是配合回档transition/animation，他就会有一段时间内的过渡效果，形成了动画。

变形就是通过CSS改变元素的形状。

使用transform属性来设置元素的变形效果，里面的属性都可以设为负数。

其中transform-origin属性用于设置形变的原点

转换允许我们设置移动、旋转、缩放和倾斜元素;

位置：位移 translate（X,Y）

大小：缩放scale（XX）

旋转：rotate（xx deg）

1、形变的位移属性

transform：translateX（）沿着X轴方向平移

transform:translateY() 沿着Y轴方向平移

transform：translateZ（）沿着Z轴方向平移

注意点：

当我们使用形变位移的时候，如果需要朝两个不同的方向移动，那么这两个方向不能分开写，只能合并写（transform：translateX（） translateY（））；或者transform：translate（X,Y）。
形变位移只能位移块元素或者行内块元素。
当translate的值为百分数的时候，它的百分比是根据自身
位移之后，元素还是占着原来的位置的，（和相对定位差不多，原本位置存在，只不过看着像走了）
通常使用在页面中鼠标移动上去的效果

关于Z轴平移，正常情况下，就是调整元素和人眼之间的距离。【距离越大，元素离人越近，元素看着越大，实际上元素的实际大小不变】

Z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看的见效果，必须给网页body设置视距【perspective】视距单位使用的是px像素。（需要3D效果就必须要视距）

2、形变的缩放属性

scaleX 水平方向缩放

scaleY 垂直方向缩放

scale（2,2）双向缩放

注意点：scale缩放都是成倍数缩放的，所以里面的属性值不能加上单位。当属性值小于1的时候，就是缩小。

    .test img {width: 200px;height: 200px;transition: all .5s linear;}.test img:hover {transform: scale(1.5, 1.5);}
<!-- 缩放 --><div class="test"><p>缩放测试</p><img src="img/dog2.jpg"></div>

3、形变的旋转属性

rotateX X轴方向旋转

rotateY Y轴方向旋转

rotateZ Z轴方向旋转

rotate（）元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转，单位是deg（1turn就是一圈）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.contain {width: 200px;height: 200px;background-color: pink;margin: 50px auto;perspective: 700px;}.demo {transition: .5s linear;/* position: absolute; */}img {width: 200px;height: 200px;}.demo:nth-of-type(1):hover {transform: rotateX(360deg);}/* 向右旋转 */.demo:nth-of-type(2):hover {transform: rotateY(88deg);}.demo:nth-of-type(3):hover {transform: rotateZ(180deg);}</style>
</head><body><div class="contain"><div class="demo"><img src="img/dog.jpg" alt=""></div><div class="demo"><img src="img/dog1.jpg" alt=""></div><div class="demo"><img src="img/dog2.jpg" alt=""></div></div>
</body></html>

CSS——过渡、形变、动画相关推荐

[css] 过渡和动画的区别是什么？
[css] 过渡和动画的区别是什么? 相同:都会让你的页面元素动起来区别: 过渡 transition1.需要事件触发,比如hover,focus,checked , js改, @media que ...
css过渡和动画的区别
css过渡和动画的区别 css过渡和动画(animation)都能让元素动起来,区别在于: 1.css过渡需要有一个事件触发(像 :hover等),才会起作用,而animation不需要. 2.动画( ...
CSS——过渡与动画
1. 缓动效果给过渡和动画加上缓动效果(比如具有回弹效果的过渡过程) 回弹效果是指当一个过渡达到最终值时,往回倒一点,然后再次回到最终值,如此往复一次或多次,并逐渐收敛,最终稳定在最终值. 假设要用 ...
前端悬浮窗效果_web前端入门到实战：css过渡和动画解析文
一.transition 过渡过渡效果一般由浏览器直接改变元素的CSS属性实现,从一种状态过渡到另一种状态. 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 第一.在默认样式中声明元素的初始 ...
CSS 过渡与动画：transition 属性 ease-in, ease-out, ease-in-out
简而言之: ease-in 加速, ease-out 减速, ease-in-out 先加速后减速, linear 匀速, ease 与 ease-in-out 类似. stack overflow ...
html和css动画效果,css过渡和css动画的区别是什么？
CSS3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果.那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助. css过渡 ...
css过渡和css动画的区别是什么？
CSS3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果.那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助. css过渡 ...
10个css动画,10个精妙的CSS和Javascript动画Logo的示例(上)
Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. Jake Rocheleau,2017年3月6日如今使用HTML和CSS构建动画Logo比以往更容易,且 ...
vue css过渡及过渡钩子函数介绍
过渡系统是 Vue.js 为 DOM 动画效果提供的一个特性,它能在从DOM中插入移除时触发你的CSS过渡和动画 ,也就是说在DOM 发生变化时为其加特定的 class类名,Vue.js的过渡系统也支 ...
Vue过渡效果之CSS过渡
前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

CSS——过渡、形变、动画