我们经常会看到CSS3能制作出很炫酷的动画效果,但是自己却只能做一些简单的。原因是对CSS3动画只知其一,不知其二。最近正好有做动画的项目,于是花时间将css3动画做了一个探究之旅,记录在册。

动画是使元素从一种样式逐渐变化为另外一种效果,CSS3动画的生成,主要依赖@keyframes定义动画,animation执行动画。

@keyframes

通过 @keyframes 规则创建动画。

@keyframes keyframes-name {keyframes-selector {css-styles;}}

keyframes-name 帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。

keyframes-selector 动画时长的百分比。合法值:

0-100%

from 等效于 0%

to 等效于 100%

css-styles 需要改变的css样式,支持多属性

animation

animation 是一个简写的属性,用于设置6个动画属性:

  • animation-name:这个就是使用@keyframes定义的动画名称;
  • animation-duration:动画执行的时间,以秒为单位
  • animation-delay:规定动画开始之前的延迟
  • animation-iteration-count:规定动画应该播放的次数,n(次数) | infinite(无限次)
  • animation-direction:规定是否应该轮流反向播放动画
  • animation-timing-function:规定动画的速度曲线

动态效果查看:心跳

@keyframes changeSize {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(0.8);
}
} .demo {
animation-name: changeSize;
animation-duration: 2s;
animation-iteration-count:infinite;
}

animation-timing-function

这里说下复杂属性,第一个是animation-timing-function规定动画速度的曲线

说明
ease 默认,低速开始,然后加快,结束前变慢
linear 从头到尾速度相同
ease-in 以低速度开始,先慢后快
ease-out 以低速结束,先快后慢
ease-in-out 以低速开始和结束
cubic-bezier(x1,y1,x2,y2) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

cubic-bezier:三次赛贝尔曲线函数,前面的几个预设函数都可以通过它来实现。 通过控制曲线上的四个点(起始点(0,0)、终止点(1,1)以及两个相互分离的中间点)来绘制一条曲线并以曲线的状态来反映动画过程中速度的变化。可以访问 cubic-bezier.com 来设置对应的值。

ease 的效果等同于 cubic-bezier(.25,.01,.25,1)

linear 的效果等同于 cubic-bezier(0,0,1,1)

ease-in 的效果等同于 cubic-bezier(.42,0,1,1)

ease-out 的效果等同于 cubic-bezier(0,0,.58,1)

ease-in-out 的效果等同于 cubic-bezier(.42,0,.58,1)

动态效果查看:球体降落

@keyframes dropdown {
0% {
top: 0px;
}
100% {
top: 420px;
}
} ul li{
&:first-child{
animation: dropdown 6s ease infinite;
}
&:nth-child(2){
animation: dropdown 6s linear infinite;
}
&:nth-child(3){
animation: dropdown 6s ease-in infinite;
}
&:nth-child(4){
animation: dropdown 6s ease-out infinite;
}
&:nth-child(5){
animation: dropdown 6s ease-in-out infinite;
}
&:last-child{
animation: dropdown 6s cubic-bezier(.08,.6,.67,1.03) infinite;
}
}

animation-direction

animation-direction 定义是否应该轮流反向播放动画,如果动画次数设置为一次,则无效。

说明
normal 默认,正常播放
reverse 动画反向播放
alternate 交替播放, 动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)反向播放。
alternate-reverse 交替播放, 动画会在奇数次数(1、3、5 等等)反向播放,而在偶数次数(2、4、6 等等)正常播放。

我们可以把上面的案例每个都加上alternate的参数,再看下效果,是不是更赞了?

动态效果查看:球体升降

ul li{
&:first-child{
animation: dropdown 6s ease infinite alternate;
}
&:nth-child(2){
animation: dropdown 6s linear infinite alternate;
}
&:nth-child(3){
animation: dropdown 6s ease-in infinite alternate;
}
&:nth-child(4){
animation: dropdown 6s ease-out infinite alternate;
}
&:nth-child(5){
animation: dropdown 6s ease-in-out infinite alternate;
}
&:last-child{
animation: dropdown 6s cubic-bezier(.08,.6,.67,1.03) infinite alternate;
}
}

css3动画基础详解(@keyframes和animation)的更多相关文章

  1. css3动画transition详解2

    transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition ...

  2. css3动画transition详解

    一.transition-property 语法: transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ] ...

  3. Android基础夯实--重温动画(五)之属性动画 ObjectAnimator详解

    只有一种真正的英雄主义 一.摘要 ObjectAnimator是ValueAnimator的子类,它和ValueAnimator一样,同样具有计算属性值的功能,但对比ValueAnimator,它会更 ...

  4. CSS3图片翻转动画技术详解

    CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...

  5. iOS:核心动画的详解介绍:CAAnimation(抽象类)及其子类

    核心动画的详解介绍:CAAnimation(抽象类)   1.核心动画基本概念 Core Animation是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍! 使用它 ...

  6. Android Animations 视图动画使用详解!!!

    转自:http://www.open-open.com/lib/view/open1335777066015.html Android Animations 视图动画使用详解 一.动画类型 Andro ...

  7. 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记

    来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...

  8. Dom探索之基础详解

    认识DOM DOM级别 注::DOM 0级标准实际并不存在,只是历史坐标系的一个参照点而已,具体的说,它指IE4.0和Netscape Navigator4.0最初支持的DHTML. 节点类型 注:1 ...

  9. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

随机推荐

  1. Laravel一些常用命令整理

    自动创建项目 laravel new || laravel new xxx || composer create-project --prefer-dist laravel/laravel blogc ...

  2. ubuntu下面的某些软件安装

    1. python 下面的mysql驱动:不是在pip里面安装,执行下面命令 apt-get install python-mysqldb

  3. 自己写的第一个Schema文件

    <Schema name="FinSchema" description="财务模式" measuresCaption="财务模式"& ...

  4. print高亮显示

    显示颜色格式:\033[显示方式;字体色;背景色m......[\033[0m] ------------------------------------------- --------------- ...

  5. 3. Javascript学习笔记——变量、内存、作用域

    3. 变量.内存.作用域 3.1 基本类型和引用类型的值 ECMAScript 变量可能包含两种不同数据类型的值:基本类型值[Undefined.Null.Boolean.Number 和 Strin ...

  6. idea使用时,部分jdk的jar包(tool.jar com.sun.javadoc) 无法引入-gradle处理方案

    gradle 增加配置 def jdkHome = System.getenv("JAVA_HOME") dependencies { compile files("$j ...

  7. Pytorch学习笔记(一)——简介

    一.Tensor Tensor是Pytorch中重要的数据结构,可以认为是一个高维数组.Tensor可以是一个标量.一维数组(向量).二维数组(矩阵)或者高维数组等.Tensor和numpy的ndar ...

  8. 论文阅读 | CornerNet:Detecting Objects as Paired Keypoints

    论文地址:https://arxiv.org/abs/1808.01244v1 论文代码:https://github.com/umich-vl/CornerNet 概述 CornerNet是一篇发表 ...

  9. Vue axios 上传图片

    上传图片接口 // 上传图片 export const uploadBanner = formData => { return axios.request({ url: 'manage/slid ...

  10. grunt 实例构建(四)

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...