【CSS】过渡、变形、动画

南栀~zmt

已于 2022-04-10 19:35:02 修改

阅读量793

点赞数 4

分类专栏： CSS 文章标签： css3

于 2021-05-07 19:21:24 首次发布

本文链接：https://blog.csdn.net/qq_46658751/article/details/116496773

版权

文章目录

1. 过渡
2. 变形
3. 动画

1. 过渡

transition动画：也被称为“简易补间动画”，需要提供起始和结束两个关键帧，浏览器才能够完成样式差异比对并计算出对应的过渡动画。

transition动画的要点就是具有样式差异的两个关键帧。
适合被用来实现指定元素在两个明确的包含样式差异的状态之间往复切换的场景，像是鼠标的移入移出，元素的聚焦失焦等。

1.1 `transition-property`属性

transition-property属性用来指定过渡效果的CSS属性名称

transition-property: none|all|peoperty;

属性值	描述
none	没有属性会获得过渡效果
all	所有属性都将获得过渡效果
property	定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔

1.2 `transition-duration`属性

transition-duration属性用于定义过渡效果花费的时间
默认值为0，常用单位是秒（s）或者毫秒（ms）。

transition-duration: time;

1.3 `transition-timing-function`属性

transition-timing-function属性规定过渡效果的速度曲线
默认值为ease

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值	描述
linear	指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)）
ease	指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）
ease-in	指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1）
ease-out	指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1）
ease-in-out	指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）
cubic-bezier(n,n,n,n)	定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间

1.4 `transition-delay`属性

transition-delay属性规定过渡效果何时开始
默认值为0，常用单位是秒（s）或者毫秒（ms）
正数:过渡动作会延迟触发。负数:过渡动作会从该时间点开始，之前的动作被截断。

transition-delay: time;

1.5 `transition`属性

transition属性是一个复合属性。
用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。

transition: property duration timing-function delay;

使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。
如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。

1.6 transition应用小例子

eg：实现鼠标hover时背景图片改变

<style>
    .d{
     
        width: 200px;
        height: 100px;
        background-image: url('../images/1.gif');
        transition-property: background-image;
        transition-duration: 1.5s;
    }
    .d:hover{
     
        background-image: url('../images/5.jpg');   
    }
</style>
<body>
    <div cla