【CSS】自定义动画

CSS3动画

动画（animation）是css3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用于实现复杂的动画效果

相比于过渡动画可以实现更多变换，更多控制，连续自动播放等效果

动画的基本使用

制作动画分两步

先定义动画
再使用（调用）动画

用keyframes定义动画

<style>/* 定义动画 */@keyframes move {/* 开始状态 */0% {transform: translate(0px);}/* 结束状态 */100% {transform: translate(1000px);}}div {width: 200px;height: 200px;background-color: pink;/* 1.调用动画 */animation-name: move;/* 2.持续时间 */animation-duration: 3s;}</style>

动画序列

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是便元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词"from"和 "to”，等同于0%和100%。

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

动画常用属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性,除了animation-play-state属性。
animation-name	规定@keyframes动画的名称。（必须的)
animation-duration	规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须的)
animation-timing-function	规定动画的速度曲线，默认是“ease”。
animation-delay	规定动画何时开始，默认是0。
animation-iteration-count	规定动画被播放的次数，默认是1,还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是normal",alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是"running",还有"paused"。
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

动画简写属性

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

animation: myfirst 5s linear 2s infinite alternate;

透明度opacity:1;

添加多个动画用逗号分开

速度曲线细节

animation-time-function:规定动画的速度曲线，默认是"ease"

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
step()	指定了时间函数中的间隔数量(步长)

【CSS】自定义动画相关推荐

CSS自定义动画@keyframes的使用
CSS中有一种自定义动画样式:@keyframes,这可以在元素的animation中被引用,从而产生两种样式的过渡 @keyframes格式: @keyframes ***{from{}to{} } ...
animate.css 自定义动画
在使用animate.css 的时候动画的高度超过了预期的高度在这种情况下肯定是过不了测试的,怎么办的? <div class="fold-div animated " ...
css自定义盒子形状及动画应用
css自定义盒子形状及动画应用 <style> clip-path: polygon(X1 Y1,X2 Y2,....) </style> 当我们写页面时对盒子的形状有需求时, ...
[HTML/CSS]动画效果以及自定义动画效果
一,实现div或者文字的当鼠标浮于其上时的动画效果: 1,transition加在div中,实现动画效果的过渡效果,transition: all 3s;其中all表示所有样式都参与过渡,3s表示实现 ...
自定义动画 animate || 案例：王者荣耀手风琴效果分析
自定义动画 animate <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
自定义动画属性java_创建酷炫动画效果的10个JavaScript库
原标题:创建酷炫动画效果的10个JavaScript库 1) Dynamics.jsDynamics.js是设计基于物理规律的动画的重要Java库.它可以赋予生命给所有包含CSS 和SVG属性的DOM ...
Mr.J-- jQuery学习笔记(十九)--自定义动画实现图标特效
之前有写过自定义动画Mr.J-- jQuery学习笔记(十八)--自定义动画这次实现一个小demo 图标特效页面渲染 <!DOCTYPE html> <html lang=&qu ...
Mr.J-- jQuery学习笔记(十八)--自定义动画
animate(params,[speed],[easing],[fn]) 概述用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样 ...
【jQuery笔记Part2】05-jQuery自定义动画
jQuery自定义动画简介 animate() 使用操作多个属性使用相对值使用预定义的值通过连缀或者顺序来实现列队动画顺序写法连缀写法停止动画延时动画 jQuery笔记目录简介 j ...