从零开始学习前端开发 — 15、CSS3过渡、动画

一、css3过渡

语法： transition: 过渡属性过渡时间延迟时间过渡方式;

1.过渡属性(transition-property)

取值：all 所有发生变化的css属性都添加过渡

　　eg: transition: all 1s;

　　ident 指定要过渡的css属性列表

　　eg: transition:border-radius 1s,background 2s;

　　none 没有属性发生过渡

注：我们可以省略滑过状态或其他状态的过渡属性，但是不能省略初始状态的transition属性

2.过渡时间(transition-duration)

取值：0 不过渡

　　　time 设置一个正数，单位为s

eg: transition: all 1s;

3.延迟时间(transition-delay)

取值：

0 不延迟，过渡动画正常执行

正数按照设置的时间延迟执行过渡动画

负数设置时间前的动画将会被截断

4.过渡方式(transition-function)

取值：

ease 缓解效果，默认值

linear 匀速运动

ease-in 加速运动

ease-out 减速运动

ease-in-out 慢-快-慢

二、css3动画

语法： animation:动画名称动画执行时间动画延迟执行时间动画播放次数动画播放后的状态;

动画是由一帧一帧的关键帧组成的，在设置animation之前要先定义动画关键帧：

语法：

@keyframes 动画名称{
0%{
属性:属性值;
}
50%{
属性:属性值;
}
...
100%{
属性:属性值;
}
}

@keyframes 动画名称{
from{
属性:属性值;
}
...
to{
属性:属性值;
}
}

1.动画名称(animation-name)

eg: animation:ball 1s;

注：动画名称要与@keyframes中的动画名称一致

2.动画执行一次所需的时间(animation-duration)

取值：

time: 正数，单位为秒(s)或者毫秒(ms)，默认为0，不执行动画

3.动画延迟执行的时间(animation-delay)

取值：

0: 默认值，不延迟

正数：按照设置的时间延迟执行动画

负数：设置时间前的动画将会被截断

4.设置动画的播放次数(animation-iteration-count)

取值：

number 可以设置为正整数

infinite 无限循环播放

5.设置对象动画的状态(animation-play-state)

取值：

running 默认值，运动

paused 动画暂停

6.设置动画的播放方式(animation-timing-function)

取值：

ease

linear 匀速运动

ease-in

ease-out

ease-in-out

step-start 马上转跳到动画的结束状态或马上转跳到下一帧，中间没有过渡

step-end 保持动画开始时的状态，直到动画执行结束，转跳到动画结束状态

steps(n,start|end)

n代表动画分几步完成

7.设置对象动画的运动方向(animation-direction)

取值：

normal 默认值，正常方向运动

reverse 与normal方向相反运动

alternate 奇数次正方向，偶数次反方向

alternate-reverse 奇数次反方向，偶数次正方向

8.设置对象动画时间之外的状态(animation-fill-mode)

取值：

none 默认值，不设置对象动画之外的状态

forwards 保持动画结束时的状态

backwards 保持动画开始时的状态

both 遵循forwards和backwards两个规则

三、CSS3 transition和animation的区别

1.transition动画执行需要出发条件，animation动画出发在页面加载完成后可以自动执行

2.transition触发一次执行一次，多次执行需要执行多次触发条件，animation可以无限循环播放，也可限制次数

3.transition只能设置开始和结束状态不能设置中间的动态

扩展：隐藏变形元素的背面 backface-visibility:hidden;

更多专业前端知识，请上【猿2048】www.mk2048.com

从零开始学习前端开发 — 15、CSS3过渡、动画相关推荐

从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
从零开始学习前端开发 — 7、CSS宽高自适应
一.宽度自适应语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果二.高度自适应语法: ...
从零开始学习前端开发 — 1、HTML基础
一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...
好程序员web前端技术之CSS3过渡
好程序员web前端技术之CSS3过渡,css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改 ...
我是小白0基础，现在我想学习前端开发，该如何系统的学习？
以下纯属个人观点和建议,肯定是有局限性的,但是也希望能给你带来一些帮助. 开始我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一,所以多我们提出的要求也就越来越高了.所以我们需要的也就不仅 ...
2021学习前端开发有前途吗？（建议收藏）
导语: 同学A:他现在是一名大学生,学了学校的编程课程,什么语言都学了一点,但是现在感觉自己什么都不会,他同学自学了一些,做了一两个小项目,他很羡慕,而且他个人对前端有点兴趣,不知道现在开始学前端怎么 ...
从零开始学习嵌入式开发（ubuntu）
从零开始学习嵌入式开发(ubuntu) 写在前面:博主的电脑是win10+ubuntu18.04 一.安装ubuntu 1.获取下载源国内一般使用的都是清华的镜像源,网址为:清华源ubuntu下载 ...
css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...
target 模拟后台服务器框架集 frameset和body不合,所以如果用frameset就不能有body标签利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显示不 ...
前端初学者开发学习视频_初学者学习前端开发的实用指南
前端初学者开发学习视频 by Nikita Rudenko 通过尼基塔·鲁登科(Nikita Rudenko) 初学者学习前端开发的实用指南 (A practical guide to learnin ...

从零开始学习前端开发 — 15、CSS3过渡、动画

从零开始学习前端开发 — 15、CSS3过渡、动画相关推荐

最新文章

热门文章