前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍CSS3动画知识。

文章目录

前言
一、动画是什么
二、过渡动画：transition
三、转换动画：transform
四、自定义动画：animation

一、动画是什么

过渡动画：transition。
转换动画：transform。
自定义动画：animation。

二、过渡动画：transition

<head><style>.box {width: 200px;height: 100px;background-color: pink;/* transition: width 1s, height 2s; */transition: all 1s;}.box:hover {width: 400px;height: 500px;background-color: skyblue;}</style>
</head>
<body><div class="box"></div>
</body>

三、转换动画：transform

translate移动

.box {width: 200px;height: 100px;background-color: pink;transform: translate(100px,200px);
}

定位+transform: translate(-50%，-50%)可以实现元素居中

rotate旋转

img {width: 200px;transform: rotate(45deg);
}

设置转换中心点 transform-origin

img {width: 200px;transform-origin: top right;transform: rotate(45deg);
}

scale缩放

.box2 {width: 200px;height: 100px;background-color: pink;transform: scale(2,1.5)
}

skew倾斜

.box2 {width: 200px;height: 100px;background-color: black;transform: skew(30deg,20deg)
}

四、自定义动画：animation

先定义动画；
再使用动画

/* 使用动画 */
animation-name: move;
animation-duration: 2s;

动画序列

@keyframes move {0% {transform: translate(0,0);}25% {transform: translate(500px,0);}50% {transform: translate(500px,500px);}75% {transform: translate(0,500px);}100% {transform: translate(0,0);}
}

常用属性

属性	描述
animation-name	动画名称
animation-duration	动画持续时间
animation-timing-function	动画时间函数,默认ease
animation-delay	动画延迟时间
animation-iteration-count	动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction	动画执行方向，是否反方向播放
animation-paly-state	动画播放状态
animation-fill-mode	动画填充模式

【前端知识之CSS】CSS3动画相关推荐

【面试篇】前端点滴（css/css3）
[面试篇]前端点滴(CSS/CSS3)---倾尽所有面试小问答 css基础 css盒模型 css选择器 BFC css(float) css(position/z-index) css(displa ...
【前端知识之CSS】CSS3新增特性
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍CSS3新增特性. 文章目录前言一.选择器二.新样式 1.边框 2.背景 3.文字 4.颜色三.transition过渡(一般和:hov ...
前端之Html+Css实现动画的方法
在不使用JS.Canvas.gif等其他方式的情况下,前端实现动画的方式有Css3的transform属性.transition属性和animation属性三种方式. 1.transform属性可以 ...
【前端知识之CSS】CSS提高性能的方法有哪些
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍如果要进行优化,CSS提高性能的方法有哪些. 文章目录前言一.内联首屏关键CSS 二.异步加载CSS 三.资源压缩四.合理使用选择器五. ...
【前端知识之CSS】CSS视差滚动
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍如何用CSS完成视差滚动的效果. 文章目录前言一.视差滚动是什么二.background-attachment 一.视差滚动是什么视差滚 ...
前端知识整理 CSS盒模型
我们先来说说什么是CSS的盒模型呢? 百度一下: 想象一个盒子,它有:外边距(margin).边框(border).内边距(padding).内容(content)四个属性: 好百度是这样解释的. ...
前端知识 | React Native Animated动画浅谈
在移动开发中,动画能有效的提高用户体验.在 React Native 中,也有相应的 API 供我们做动画.这里着重说一下 Animated 动画库,它可以让我们非常简便的去实现各式各样的动画和交互方 ...
css: css3动画（淡入淡出）
@keyframes 规则用于创建动画,并且必须把它捆绑到某个选择器,否则不会产生动画效果. 您必须定义动画的名称和时长.如果忽略时长,则动画不会允许,因为默认值是 0.(动画的名称和时长这两个属性 ...
CSS3动画——steps函数
CSS3动画中应用的定时函数(timing function)常用的有内置关键字linear, ease, ease-in, ease-out, ease-in-out, step-start, st ...

【前端知识之CSS】CSS3动画

前言

文章目录

一、动画是什么

二、过渡动画：transition

三、转换动画：transform

四、自定义动画：animation

【前端知识之CSS】CSS3动画相关推荐

最新文章

热门文章