Animations动画和Transition过渡效果
Animations动画
Animations由两部分组成:
css动画的配置,
以及一系列的keyframes(用来描述动画的开始、过程、结束状态)
1、animation-name :xx (设置关键帧的名称为xx)
2、animation-duration:5s (动画持续时间为5s)
3、animation-timing-function: linear (动画时间曲线 也叫做运行速度为匀速)
取值:
linear 匀速
ease (默认)低速开始—>加速—>结束前减速
ease-in 以低速开始
ease-out 以低速结束
ease-in-out 以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
4、animation-delay:5s (动画等待5后开始)
5、animatiom-iteration-count:1 (动画播放次数为1次)
取值:
xx数字,定义应该播放xx次动画
infinite-无限次执行
6、animation-direction: alternate(设置动画为反向播放 )
取值:
nomal(默认)-执行完一次之后回到起点继续执行下一次
alternate-往返动画,执行完一次之后往回执行下一次
reverse-反向执行
7、animation-fill-mode: (动画结束的最后一帧)
取值:
none-不做任何改变
forwards-让元素结束状态保持动画最后一帧的样式
backwards-让元素等待状态的时候显示动画第一帧的样式
both-等待状态显示第一帧,结束状态保持最后一帧
8、animation-play-state: (设置动画是否暂停)
取值:
running-执行动画
paused-暂停动画
9、简写
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画
animation:动画名称 动画时长 (有这两个即可以完成动画,其它未设置,有默认值)
10、关键帧的书写
第一种:from to
@keyframes swipe {
from {
css样式
}
to {
css样式
}
}
第二种:百分比,可以分多段
@keyframes LeftToRight {
0% {
css样式
}
50% {
css样式
}
100% {
css样式
}
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>animation动画</title><style>.one{width: 100px;height: 100px;border-radius: 16px;background-color: pink;animation: toRight 2s ease .5s infinite alternate forwards;}.one:hover{animation-play-state: paused;}@keyframes toRight {0%{margin-left: 0%;}25%{margin-left: 25%;}50%{margin-left: 50%;}75%{margin-left: 75%;}100%{margin-left: 100%;}}</style>
</head>
<body><div class="one"></div>
</body>
</html>
transition过渡效果
设置元素中参与过渡的属性名称
transition-property:none || all || property
none:表示没有属性参与过渡效果;
all:表示所有属性都参与过渡效果;
property:定义应用过渡效果的 CSS 属性名称列表,多个属性名称之间使用逗号,进行分隔。
设置过渡需要花费的时间(单位为秒或者毫秒)
transition-duration:time
默认值为 0,意味着不会有效果.如果有多个参与过渡的属性,也可以依次为这些属性设置过渡需要的时间,多个属性之间使用逗号进行分隔
设置过渡动画的类型
transition-timing-function: ease-in-out;
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 之间
设置过渡效果何时开始(设置在过渡效果开始之前需要等待的时间,单位为秒或毫秒)
transition-delay: .6s
简写
transition: transition-property transition-duration transition-timing-function transition-delay;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>transition过渡效果</title><style>/* transition: transition-property transition-duration transition-timing-function transition-delay; */.one{width: 100px;height: 100px;background: paleturquoise;border: 2px solid palegoldenrod;transition-property: width, background;transition-duration: 1s,.6s;transition-timing-function: ease-in-out;transition-delay:.6s}.one:hover{width: 200px;background: palevioletred;}.two{width: 100px;height: 100px;margin-top: 50px;background: pink;border: 3px solid plum;transition: width .5s ease 2s,background-color .8s ease-in 2s,transform 2s;}.two:hover{width: 200px;background-color: palegoldenrod;transform: rotate(180deg);}</style>
</head>
<body><div class="one"></div><div class="two"></div>
</body>
</html>
Animations动画和Transition过渡效果相关推荐
- 1.CSS3 教程-> 多列布局 > image模块 > cssTransition 过渡 > CSS Animations 动画 > Transform二维
CSS3 教程 多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维 介绍 CSS3 是层叠样式表(Cascading Style S ...
- Vue 动画效果、过渡效果
文章目录 动画效果 过渡效果 单个元素 多个元素 Animate.css 总结 todolist 增加动画效果 动画效果 新建 Test.vue <template><div> ...
- html如何创建关键帧动画旋转,[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画...
通过这个有趣的教程学习 CSS Animations(动画) 和 Keyframes(关键帧). 我们要做什么? 下面是最终代码,也就是我们将要最终实现的演示: 基础准备 对于这个实现,我们需要一个简 ...
- CSS动画:transition画一个爱心
CSS中最简单的动画叫做 transition(转变).通常,当一个元素的样式属性值发生变化时,我们会立即看到页面元素发生变化,也就是页面元素从旧的属性值立即变成新的属性值的效果.Transition ...
- vue 动画(transition)
一. 实现原理 在插入.更新.移除 DOM 元素时,在合适的时候给元素添加样式类名,配合 CSS 样式使用,实现动画效果. 通俗来讲,就是将要进行动画操作的 DOM 元素用 transition 标签 ...
- vue中的动画效果与过渡效果
目录 一.动画效果 1.过程: 2.注意: 二.过渡效果 三.多个元素过度 四.第三方css库 动画与过渡效果添加的六个属性: 1.v-enter-active:进入的整个过程都能响应的样式 2.v- ...
- css 右上角 翻开动画_css简单动画(transition属性)
一.对transition属性的认识 1.transition 属性是一个简写属性,可用于设置四个过渡属性: transition-property 过渡效果的 CSS 属性的名称(heigh ...
- css hover变成手_web前端入门到实战:彻底掌握css动画「transition」
马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了 ...
- css动画(transition,translate,rotate,scale)
序言 为什么会用css动画呢 通过CSS3过渡,我们可以在不使用 Flash 动画或 JavaScript 的情况下, 使元素从一种样式变换为另一种样式时为元素添加效果. css动画可以做很多特效,特 ...
最新文章
- matlab 中调用s函数表达式,[求助]S函数中能否调用M函数
- mysql数据库约束无符号_mysql 数据类型 约束条件
- [NOIP2006] 金明的预算方案
- lr监控虚拟服务器,lr监控服务器 教程
- python 实现显著性检测_使用python轻松实现高大上的YOLOV4对象检测算法
- 小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
- C#2种类型时间戳(秒时间戳、毫秒时间戳)
- 【直播礼物特效】vapxtool简介(一)(企鹅电竞)
- Spring Boot 对接微信V3支付(附源码)
- 手机黑圆点怎么打_两个字中间的圆点怎么打?黑色圆点符号怎么打出来?
- excel的poi和EasyExcel的基本读写
- 没有学历怎么找运维工作?
- 微信小程序-组件样式覆盖
- 我是这样入门“机器学习”的
- linux与pe到移动硬盘,将PE放入移动硬盘的简单方法几点疑问-已解决(转自深
- 4.12 并发技术:sync包同步调度综合案例
- 在Flex Chart 中绘制3D图表
- vue使用常见问题及解决方案
- Dell Fn键 F1-F12特殊功能键
- js+cookie 购物车