前端CSS3动画animation用法
前端CSS3动画animation用法
学习如下动画属性
- @keyframes
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timing-function
- animation-fill-mode
- animation-play-state
- animation
1. @keyframes
@keyframes 规则中指定了 CSS 样式,动画将在特定时间逐渐从当前样式更改为新样式
要使动画生效,必须将动画绑定到某个元素
用法1
点击查看代码
@keyframes anim {
from {background-color: red;}
to {background-color: blue;}
}
anim为动画的名称
from定义动画开始时小方块的背景色为红色
from定义动画结束时小方块的背景色为蓝色
用法2
点击查看代码
@keyframes anim {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
0%定义动画开始(完成0%)时小方块的背景色为红色
25%定义动画在完成25%时小方块的背景色为黄色
50%定义动画在完成50%时小方块的背景色为蓝色
100%定义动画结束(完成100%)时小方块的背景色为绿色
2. animation-name
@keyframes anim { ... }
anim就是动画的名称
3. animation-duration
动画完成一个周期应花费的时间(以秒或毫秒为单位)
animation-duration: 2s | 2000ms;
4. animation-delay
动画开始的延迟时间(以秒或毫秒为单位)
允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画(也就是动画提前两秒开始)
animation-delay: 2s;
5. animation-iteration-count
动画应播放的次数
animation-iteration-count: 3;
6. animation-direction
动画是向前播放、向后播放还是交替播放
animation-direction: normal | alternate;
- normal:(默认)动画应该正常播放
- alternate:动画应该轮流反向播放
7. animation-timing-function
动画的速度曲线
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
- linear:动画从头到尾的速度是相同的
- ease:(默认)动画以低速开始,然后加快,在结束前变慢
- ease-in:动画以低速开始
- ease-out:动画以低速结束
- ease-in-out:动画以低速开始和结束
- cubic-bezier(n,n,n,n):在cubic-bezier函数中自己的值。可能的值是从0到1的数值
8. animation-fill-mode
元素在不播放动画时的样式(在开始前、结束后,或两者同时)
animation-fill-mode : none | forwards | backwards | both;
- none:(默认)不改变
- forwards:当动画完成后,保持最后一个属性值(在最后一 个关键帧中定义)
- backwards:在animation-delay所指定的一段时间内, 在动画显示之前,应用开始属性值(在第一个关键帧中定义)
- both:向前和向后填充模式都被应用
9. animation-play-state
动画的运行与暂停
animation-play-state: paused | running;
- paused:规定动画已暂停
- running:规定动画正在播放
10. animation
设置所有动画属性的简写属性
animation: name duration timing-function delay iteration-count direction;
动画名称 动画时长 动画速度曲线 动画延时 动画播放次数 动画是否应该轮流反向播放
前端CSS3动画animation用法的更多相关文章
- CSS3 动画animation
关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- CSS3 动画 animation和@keyframes
CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...
- CSS3动画animation认识,animate.css的使用
CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
- css3动画animation
动画:animation animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...
- CSS3 动画Animation的8大属性
animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...
- css3动画-animation
animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- 进入css3动画世界(二)
进入css3动画世界(二) 今天主要来讲transition和transform入门,以后会用这两种属性配合做一些动效. 注:本文面向前端css3动画入门人员,我对这个也了解不深,如本文写的有纰漏请指 ...
随机推荐
- 【Android开发】APP桌面角标问题
Demo:https://github.com/baitutang1221/BadgeNumberManager 参考:https://juejin.im/post/59f2e59751882578c ...
- vue简单的父子组件之间传值
todo-list为例子: 代码: 父传子--------------属性 v-bind 子传父--------------$emit <!DOCTYPE html> <html ...
- node的两种随起随用静态服务器搭建
一. anywhere Anywhere是一个随启随用的静态服务器,它可以随时随地将你的当前目录变成一个静态文件服务器的根目录. 1.确定电脑上安装了node.js 2.在当前所在项目文件夹下输入 ...
- 微信小程序实战,用vue3实现每日浪漫情话推荐~
之前做了个恋爱话术微信小程序,实现高情商的恋爱聊天. 但最近突然发现,每天早上给女朋友发一段优美情话可以让她开心一整天,但无奈自己的语言水平确实有限,不能随手拈来,着实让人有点不爽. 不过办法总比困难 ...
- Ubuntu20.04搭建web服务器
其他Ubuntu20以及Ubuntu18系列也可以!
- 一键智能Mock,你值得拥有
大家好呀,我是一名苦逼的前端开发工程师,为啥苦逼呢,这不,项目下周就要上线了,但是后端还没给我接口,没有接口我就无法调试,工作停滞不前,我也只能坐着干着急. 我报告给了我的老板山哥: 老板,这后端 ...
- 2021.12.08 [SHOI2009]会场预约(平衡树游码表)
2021.12.08 [SHOI2009]会场预约(平衡树游码表) https://www.luogu.com.cn/problem/P2161 题意: 你需要维护一个 在数轴上的线段 的集合 \(S ...
- 【多线程与高并发原理篇:3_java内存模型】
1. 概述 Java 内存模型即 Java Memory Model,简称 JMM.从抽象的角度来看,JMM 定义了线程和主内存之间的抽象关系,线程之间的共享变量存储在主内存中,每个线程都有一个私有的 ...
- vue-cli4 vue-config.js配置及其备注
// vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compre ...
- Antd Modal 可拖拽移动
一 目标: 实现antd Modal 弹窗或者其他弹窗的点击标题进行拖拽的效果 二 准备及思录: 1.使用antd Modal 组件,要想改变位置需要改变Modal style 的left 和top ...