标签：格式   改进   样式   hover   完成   添加   指定   时间   速度   

CSS 过渡

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

transition-property 规定设置过渡效果的 CSS 属性的名称。

定义转换动画的CSS属性名称

IDENT：指定的CSS属性（width、height、background-color属性等）

all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

ease：速度由快到慢（默认值）

linear：速度恒速（匀速运动）

ease-in：速度越来越快（渐显效果）

ease-out：速度越来越慢（渐隐效果）

ease-in-out：速度先加速再减速（渐显渐隐效果）

transition-delay 定义过渡效果何时开始。

格式：

通过一些CSS的简单动作触发样式平滑过渡

常用动作:

伪类触发

：hover

：active

：focus

：checked

实现步骤

1.在默认样式中声明元素的初始状态样式

2.声明过渡元素最终状态样式，如悬浮状态

3.在默认样式中通过添加过渡函数，添加一些不同的样式

练习

照片墙改进

给每张图片添加过渡效果，用伪类hover触发过渡

动画的总时长为0.6s，没有延迟，动画方式为ease-in-out

制作QQ彩贝热销时装页面

需求说明

使用div、无序列表、超链接等标签进行有语义的布局页面结构

鼠标移入图片时，图片向左边位移12px

使用过渡设置动画时间持续1s，动画的方式为ease-out

CSS 过渡

标签：格式   改进   样式   hover   完成   添加   指定   时间   速度   

原文地址：https://www.cnblogs.com/tyr235689/p/12459761.html