CCS过渡和动画
过渡
过渡能让使用过渡的元素在样式发生变化时(例如鼠标划过,单击按钮,点击图片时,颜色,尺寸,位置等样式发生变化),定义变化过程中的动画,让变化不再是瞬间产生。
过渡样式使用transition定义,一共有四个属性
- transition-property:过渡属性,比如color, opacity, width等所有可以在css中使用的属性
- transition-duration:过渡持续时间
- transition-timing-function:过渡速度,比如linear是匀速
- transition-delay:过渡延迟,0表示立即开始
.tl:hover {
color: red;
font-size: 18px;
}
.tl {
transition-property: color font-size;//可以定义多个属性同时过渡,或者使用all代表所有变化的属性
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 0s;
}
也可以写到一起:
.tl:hover {
color: red;
font-size: 18px;
}
.tl {
transition: font-size linear 2s 0s, color linear 4s 0s
}
注意多个属性可以定义不同的过渡效果,用逗号隔开,时间一定要带单位,比如0s不能写成0
动画
过渡是作用于元素发生改变的过程,动画这可以在正常显示的时候动起来
设置关键帧 @keyframes
@keyframes my-animation {
0% {
color: red;
}
50% {
color: green;
}
100% {
color: blue;
}
}
也可以只设置首尾两个关键帧
@keyframes my-animation {
from {
color: green;
}
to {
color: blue;
}
}
- 使用关键帧让动画作用于元素
p {
animation: my-animation 3s linear infinite alternate;
}
infinite:动画播放次数为循环播放
alternate:动画播放顺序为先正向后反向
CCS过渡和动画的更多相关文章
- 【CSS】过渡、动画和变换
1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE ht ...
- Css3新特性应用之过渡与动画
目录 背景与边框第一部分 背景与边框第二部分 形状 视觉效果 字体排印 用户体验 结构与布局 过渡与动画 源码下载 一.缓动效果 学习和利用贝塞尔曲线,默认支持ease,ease-in,ease-ou ...
- 过渡与动画 - steps调速函数&CSS值与单位之ch
写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...
- 过渡与动画 - 逐帧动画&steps调速函数
写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...
- 过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数
难题 给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不完全匀速的 以纯技术的角度来看,回 ...
- 重新想,重新看——CSS3变形,过渡与动画④
最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...
- 重新想,重新看——CSS3变形,过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
- Vue——关于css过渡和动画那些事
1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...
- CSS3 过渡、动画、多列、用户界面
CSS3 过渡.动画.多列.用户界面 transition过渡 transition: transition-property transition-duration transition-timin ...
随机推荐
- 关于爬虫的日常复习(17)——scrapy系列2
- 第一个javaWeb项目-注册界面
基本功能: 实现信息录入到数据库和信息规范检查 题目要求: 项目目录: 网页界面: 程序源码: package Dao; import java.sql.Connection; import java ...
- Manipulating Data from Oracle Object Storage to ADW with Oracle Data Integrator (ODI)
0. Introduction and Prerequisites This article presents an overview on how to use Oracle Data Integr ...
- QTP测试web时:打开ie浏览器进行录制但qtp录制脚本为空
1. 关闭ie的保护模式:设置——internet选项——安全——取消勾选“启用保护模式” 这一步很关键,之前试过很多步骤,只有这个成功了. 修改后如果可行即可.如果不行再进行下面操作: 2.关闭杀毒 ...
- 【Java并发基础】Java线程的生命周期
前言 线程是操作系统中的一个概念,支持多线程的语言都是对OS中的线程进行了封装.要学好线程,就要搞清除它的生命周期,也就是生命周期各个节点的状态转换机制.不同的开发语言对操作系统中的线程进行了不同的封 ...
- NOI2019滚粗记
Day -15 期末考完了,爆炸爆炸,就连数学和物理都错了好多傻*错误QwQ 哎呀管他的,NOI我来了! 跑到广附集训来了23333 Day -14 -- -2 做题,听题,哇和一群队爷在一个教室,真 ...
- ActiveMQ 快速入门教程系列 第一章 点对点消息实现
ActiveMQ 开发包下载及运行环境搭建 主页:http://activemq.apache.org/目前最新版本:5.11.1开发包及源码下载地址:http://activemq.apache.o ...
- 微信小程序框架分析小练手(三)——仿香哈菜谱小程序制作
香哈菜谱是一款围绕美食而成的小程序,在这里可以查看各式各样的菜谱. 一.打开微信开发者工具,新建一个项目:xhcp.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标.美食轮播图片.宫格导航图 ...
- NLP(二十)利用BERT实现文本二分类
在我们进行事件抽取的时候,我们需要触发词来确定是否属于某个特定的事件类型,比如我们以政治上的出访类事件为例,这类事件往往会出现"访问"这个词语,但是仅仅通过"访问&q ...
- Java并发编程-扩展可回调的Future
前提 最近在看JUC线程池java.util.concurrent.ThreadPoolExecutor的源码实现,其中了解到java.util.concurrent.Future的实现原理.从目前j ...