Web前端开发——CSS3之过渡与动画

最新推荐文章于 2024-01-24 16:53:53 发布

OSurer

最新推荐文章于 2024-01-24 16:53:53 发布

阅读量821

点赞数

分类专栏： Web前端开发文章标签： CSS3 过渡动画

本文链接：https://blog.csdn.net/wq_ocean_/article/details/104202226

版权

Web前端开发专栏收录该内容

26 篇文章 4 订阅

订阅专栏

1. 内容

2. 过渡transition

2.1 基本用法

prooerty的属性名如果只有一个直接写上该属性名即可，若是多个属性，则属性名之间用逗号隔开，如果是所有属性，则用all表示；
duration持续时间可以是秒或毫秒为单位；
timing-function属性比较常用，表示变化过程是以快慢快还是线慢快的方式，具体的方式见下表：

2.2 案例

div内定义黑色的文字和灰色的背景为基本状态，transiton定义所有属性变化的值来完成过渡；
div.hover内定义了白色和绿色的背景作为最终的状态

3. animation动画

3.1 内容

keyframes翻译过来称关键帧，动画效果是由很多幅静态的图片连续播放形成的，由于人眼的延迟会自动的将这些图片连接在一起，从而形成动态的动画效果，所以在定义动画的时候也是粗当于这些静态的图片摆放进去，每幅静态图片我们都称为是一个keyframes，所以这个规则定义出来的就是所有关键帧，动画定义好之后就可以用animation属性进行调用，animation属性取值见下表：

animation可以将几个属性值统一简写在一起：name duration timing-function
name必须为使用@keyframes定义的动画的名字；
duration与timing-function与transition完全一样；
play-state表示当前的动画播放状态

3.2 案例

3.2.1 案例1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		width: 100px;
		height: 100px;
		background-color: black;
	}
	@keyframes mycolor
	 {
	    0%     {background-color:red;}
	    30%   {background-color:blue;}
	    60%   {background-color:yellow;}
	    100% {background-color:green;}
	}
	 div:hover
	{
	    animation: mycolor 5s linear;
	}
	</style>

</head>
<body>
<div class = "box">
	
</div>

</html>

这是一个鼠标放在div盒子时颜色会发生变化动画，由上述代码可以看到：
首先我们需要用@keyframes定义动画的名字，这个名字为mycolor；
其次用百分号来表示播放的进度的变化；
最后用animation属性引用定义好的动画；

3.2.2 案例2

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-timing-function属性</title>
    <style type="text/css">
        @-webkit-keyframes mytransform
        {
            0%{ }
            100%{width:300px;}
        }
        div
        {
            width:100px;
            height:50px;
            text-align:center;
            line-height:50px;
            border-radius:0;
            background-color:#14C7F3;
            margin-top:10px;
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
        }
       
        #div1{-webkit-animation-timing-function:linear;}
        #div2{-webkit-animation-timing-function:ease;}
        #div3{-webkit-animation-timing-function:ease-in;}
        #div4{-webkit-animation-timing-function:ease-out;}
        #div5{-webkit-animation-timing-function:ease-in-out}
    </style>
</head>
<body>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
</body>
</html>

OSurer

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发——CSS3之过渡与动画

目录1. 内容2.过渡transition2.1 基本用法2.2 案例3. animation动画3.1 内容3.2 案例3.2.1 案例13.2.2 案例21. 内容2.过渡transition2.1 基本用法prooerty的属性名如果只有一个直接写上该属性名即可，若是多个属性，则属性名之间用逗号隔开，如果是所有属性，则用...
复制链接

扫一扫