css中的过渡和动画

TKOP_

已于 2023-03-14 16:45:22 修改

阅读量681

点赞数

分类专栏： Html+Css 文章标签： css3 css

于 2020-12-22 12:47:24 首次发布

本文链接：https://blog.csdn.net/TKOP_/article/details/111396439

版权

Html+Css 专栏收录该内容

11 篇文章 5 订阅

订阅专栏

过渡

通过css3，可以在不使用flash动画或者javascript的情况下为元素添加过渡属性使其从一种样式变换为另一种样式时具有动画（过渡）的效果。经常和 :hover 伪类搭配使用。

transition：过渡属性花费时间运动曲线（默认ease）开始时刻（默认0s）;

IE10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。Chrome 25 以及更早版本需要添加 -webkit- 前缀。IE9 及更早版本不支持 transition 属性。

相关属性介绍

transition-property : 规定需要过渡的 css 属性的名称。可以使用需要过渡的属性的名称，也可以使用 all（默认）表示所有改变的属性均添加过渡效果或者 none 表示元素没有添加过渡效果。
transition-duration : 规定完成过渡效果需要花费的时间（以秒或者毫秒为单位）。默认是 0 ，所以要添加过渡就必须有这个属性。
transition-timing-function : 规定过渡效果的速度曲线。默认值为 ease 。不同属性值对应的含义如下表。
transition-delay : 规定过渡效果开始的时刻。默认是 0s 。
transition: property duration timing-function delay; 简写属性，必须按照这种顺序进行书写。可以不写里面的某个属性值，但是 duration 属性值必须要有。

注意：使用简写属性要添加多个过渡效果时，可以使用逗号将他们隔开。不能在同一个元素内写两个 transition 属性，否则会出现样式层叠。例如

<style> 
    div:nth-child(1){
        margin-left: 200px;
        margin-top: 200px;
        float: left;
        width:100px;
        height:50px;
        background:blue;
        transition:width 2s linear,transform 2s linear;
	}
	div:nth-child(2){
		margin-top: 200px;
		float: left;
		width:100px;
		height:50px;
		background: black;
	}
	div:hover {
        width:200px;
        transform: translateY(50px);
	}
</style>
<body>
	<div></div>
    <div></div>
</body>

在这里插入图片描述

值	描述
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)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

cubic-bezier(n,n,n,n) 的自己定义的值涉及贝兹曲线的知识了解即可。

动画

可以通过设置多个节点来精确控制一个或一组属性的样式变化为另一种样式来实现复杂的动画效果。相比较于过渡，动画可以实现更多变化，更多控制和连续自动播放等效果。

IE10、Firefox 以及 Opera 浏览器支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit -。IE9 及更早版本不支持 @keyframes 规则和 animation 属性。

使用 @keyframes 规则定义动画，可以改变任意多的样式任意多的次数。使用百分比来规定动画序列不同阶段发生的时间。0% （from）是动画开始，100% （to）是动画结束。

/*定义动画时指明动画名和动画序列*/
@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

animation : 所有动画属性的简写属性（除了animation-play-state属性），可以设置的六个属性如下：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
前面两个为必需属性值。
animation-name : 规定需要绑定到选择器的 keyframes 名称。
animation-duration : 规定完成一个动画周期所花费的时间，默认是 0s 。
animation-timing-function : 规定动画的速度曲线，默认是 “ease”。取值和效果与过渡一样。（这个设置的是动画序列各段内部的速度曲线，动画不同阶段使用的时间和它的百分比有关。）
animation-delay : 规定动画开始的时间，默认是 0s 。
animation-iteration-count : 规定动画被播放的次数，默认是1，可以设置任意的整数值和 infinite (无限次循环播放)。
animation-diretion : 规定动画是否在下一周期逆向播放，默认是normal。altermate 则逆向播放。
animation-play-state : 规定动画正在运行或者暂停 running/paused。
animation-fill-mode : 规定动画结束后的状态是停留在最后的状态还是返回原来的状态 forwards/backwards。

animation-timing-function属性值可以是steps(步数)

依旧使用上面的代码，只是给第二个盒子添加动画，如下:

@keyframes animation1{
    0%{width:100px;}
    25%{width:300px;}
    50%{width:500px;}
    75%{width:700px;}
    100%{width:900px;}
} 
div:nth-child(2){
    margin-top: 200px;
	float: left;
    width:100px;
    height:50px;
    background: black;
    animation: animation1 28s ;
}

这个示例中使用动画是只设置了两个属性值。animation-name 和 animation-duration 我只录制了大概一半的过程。只是为了说明 animation-timing-function 属性是对动画序列的每个阶段来说的，即 0%~25% 的阶段占总的时间25% 共7s。在这 7s 它的速度曲线是 ease 。其他属性的含义都特别明显，不一一示范。