HTML,CSS部分

最新推荐文章于 2022-02-23 10:45:13 发布

星空，仰望

最新推荐文章于 2022-02-23 10:45:13 发布

阅读量171

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_44758097/article/details/96924176

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第二周笔记

CSS动画

1、transition补间动画

它是通过定义一些元素从起点的状态和结束点的状态在一定的时间区间内通过计算来实现元素补全者这中间的过程而达到的一种动画的效果。

可计算的一些属性：

位置-平移（left/right/margin/transform）
方位-旋转（transform）
大小-缩放（transform）
透明度（opacity）
其他-线性变换（transform）

transition的几个属性：

delay：触发动画时的延迟时间
duration：动画时间
property：变换的属性
timing-function：指定时间与动画进度之间关系，常见取值如下：

取值	描述
liner	线性匀速
ease（默认值）	慢速开始，然后变快，然后慢速结束
ease-in	慢速开始
ease-out	慢速结束
ease-in-out	慢速开始慢速结束

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .container{
            height: 80px ;
            width:80px;
            background-color:black;
            transition: 0s 1s background-color linear,0s 5s width linear,0s 5s height linear;
        }
        .container:hover{
            background-color: orange;
            height:500px;
            width: 500px;
           
        }
    </style>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

transiyion的局限性

transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态

2、keyframes关键帧动画

关键帧动画不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。它可以看成多个补间动画，不同于关键帧动画的是它与元素的状态无关定义更加灵活。

使用方法：

声明keyframes动画，其格式为：

@keyframes 动画名称{
    时间节点{
        元素状态
    }
    时间节点{
        元素状态
    }
}

2.在目标元素的样式声明中使用animation属性调用关键帧声明的动画，一些属性如下：

名称	描述
animation-name	none为默认值，将没有任何动画效果，其可以用来覆盖任何动画
animation-duration	动画时间，默认为0
animation-timing-function	与transition-timing-function一样
animation-delay	延迟时间
animation-direction	默认为normal，每次循环都是向前播放，（0-100）。另一个值为alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放。reverse则为反向播放
animation-iteration-count	动画播放次数，若取infinite则为无限次循环播放
animation-fill-mode	定义动画开始之前和结束之后发生的操作，取forwards动画之后状态停在最后，取backwards为动画过后状态回到初始状态
animation-state	播放状态，默认为running，取paused为暂停

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .container{
            height: 80px ;
            width:80px;
            background-color:antiquewhite;
            animation-name: running ;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        @-webkit-keyframes running{
            0%{
                background-color: white;
            }
            25%{
                width: 300px;
                background-color: orange;
            }
            50%{
                width: 600px;
                background-color: red;
            }
            100%{
                width:80px;
                background-color: antiquewhite;
            }
        }
    </style>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

3、逐帧动画

逐帧动画的使用形式仍是keyframes动画中的一种特殊情况，它适用于无法补间计算的动画。

steps语法结构

steps(number,position)，有两个参数。

number表示动画的段数。关键帧的数量=段数+1。

position有两个值：end和start。end是默认值。
（start模式是时间一开始，直接进入第二个关键帧状态，然后顺利顺利走完全程。end模式则从时间一开始，从第一个关键帧开始跑，结果时间结束了，才走完倒数第二个关键帧，没有完成全部路程就结束了。）

案例

这张图片分为8帧，如果在keyframes里面直接是0%到100%则steps中的number填8即可，若是将其在keyframes里从0%，12.5%…逐帧设置background-position,则number设置为1即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .bear{
	        width: 126px;
	        height:57px;
	        position:absolute;
	        left:50%;
	        top:50%;
	        margin-left:-100px;
	        margin-top:-100px;
            background:url(img/bear.jpg) no-repeat 0 0;
            animation:move 1.5s steps(8,end) infinite ; 
	}
@keyframes move{
	0%{
        background-position:0 0;}
	100%{
		background-position:-872px 0;}
    </style>
</head>
<body>
    <div class="bear">
    </div>
</body>
</html>

星空，仰望

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML,CSS部分

第二周笔记CSS动画1、transition补间动画它是通过定义一些元素从起点的状态和结束点的状态在一定的时间区间内通过计算来实现元素补全者这中间的过程而达到的一种动画的效果。可计算的一些属性：位置-平移（left/right/margin/transform）方位-旋转（transform）大小-缩放（transform）透明度（opacity）其他-线性变换（transf...
复制链接

扫一扫