从零开始学习前端开发 — 15、CSS3过渡、动画

一、css3过渡

语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式;

1.过渡属性(transition-property)

取值:all 所有发生变化的css属性都添加过渡

  eg: transition: all 1s;

  ident 指定要过渡的css属性列表

  eg: transition:border-radius 1s,background 2s;

  none 没有属性发生过渡

注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性

2.过渡时间(transition-duration)

取值:0 不过渡

   time 设置一个正数,单位为s

eg: transition: all 1s;

3.延迟时间(transition-delay)

取值:

0 不延迟,过渡动画正常执行

正数 按照设置的时间延迟执行过渡动画

负数 设置时间前的动画将会被截断

4.过渡方式(transition-function)

取值:

ease 缓解效果,默认值

linear 匀速运动

ease-in 加速运动

ease-out 减速运动

ease-in-out 慢-快-慢


 

二、css3动画

语法: animation:动画名称 动画执行时间 动画延迟执行时间 动画播放次数 动画播放后的状态;

动画是由一帧一帧的关键帧组成的,在设置animation之前要先定义动画关键帧:

语法:

@keyframes 动画名称{
0%{
属性:属性值;
}
50%{
属性:属性值;
}
...
100%{
属性:属性值;
}
}

@keyframes 动画名称{
from{
属性:属性值;
}
...
to{
属性:属性值;
}
}

1.动画名称(animation-name)

eg: animation:ball 1s;

注:动画名称要与@keyframes中的动画名称一致

2.动画执行一次所需的时间(animation-duration)

取值:

time: 正数,单位为秒(s)或者毫秒(ms),默认为0,不执行动画

3.动画延迟执行的时间(animation-delay)

取值:

0: 默认值,不延迟

正数: 按照设置的时间延迟执行动画

负数: 设置时间前的动画将会被截断

4.设置动画的播放次数(animation-iteration-count)

取值:

number 可以设置为正整数

infinite 无限循环播放

5.设置对象动画的状态(animation-play-state)

取值:

running 默认值,运动

paused 动画暂停

6.设置动画的播放方式(animation-timing-function)

取值:

ease

linear 匀速运动

ease-in

ease-out

ease-in-out

step-start 马上转跳到动画的结束状态或马上转跳到下一帧,中间没有过渡

step-end 保持动画开始时的状态,直到动画执行结束,转跳到动画结束状态

steps(n,start|end)

n代表动画分几步完成

7.设置对象动画的运动方向(animation-direction)

取值:

normal 默认值,正常方向运动

reverse 与normal方向相反运动

alternate 奇数次正方向,偶数次反方向

alternate-reverse 奇数次反方向,偶数次正方向

8.设置对象动画时间之外的状态(animation-fill-mode)

取值:

none 默认值,不设置对象动画之外的状态

forwards 保持动画结束时的状态

backwards 保持动画开始时的状态

both 遵循forwards和backwards两个规则


 三、CSS3 transition和animation的区别

1.transition动画执行需要出发条件,animation动画出发在页面加载完成后可以自动执行

2.transition触发一次执行一次,多次执行需要执行多次触发条件,animation可以无限循环播放,也可限制次数

3.transition只能设置开始和结束状态 不能设置中间的动态


 

扩展:隐藏变形元素的背面 backface-visibility:hidden;


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361643.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CentOS6.4 Install FTP

目录 安装参考传输模式遇到无法显示远程文件夹报错安装参考 https://www.cnblogs.com/walblog/articles/7890226.html 传输模式 主动模式被动模式遇到无法显示远程文件夹报错 点击属性设置: 搞定。 转载于:https://www.cnblogs.com/mysticbinary/articles/11271647.…

windowsphone7高级编程中提到的地址

1、综合性技术论坛,包括windowsphone,.net,iphone,android等,网址:http://p2p.wrox.com 2、windowsphone7高级编程作者Nick Randolph发表博客的网站,网址:http://www.christec.co.nz/, 书中代码下载地址&am…

用于单元测试的JUnit教程–最终指南(PDF下载)

编者注: 我们在Java Code Geeks上提供了许多JUnit教程,例如JUnit入门示例 , 使用断言和注释的 JUnit 示例 , JUnit注释示例等。 但是,为了方便读者,我们希望将所有JUnit功能收集在一份详细的指南中。 我们…

EF 拉姆达 linq if else (整理)

首先想到:结果不正确! var data0 db.T_Plants2; //这里加.AsQueryable()if (locationType 1){.Where(d > d.NaturalEcosystem true);}else{.Where(d > d.BuiltUpArea true);}.Select(d > new{AnimalID d.PlantID,Species d.Species,}).To…

从零开始学习前端开发 — 7、CSS宽高自适应

一、宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二、高度自适应 语法:height:auto;(等同于不给元…

用jOOQ用Java编写SQL

jOOQ是“数据库优先”的类型安全的SQL API,使您可以直观地用Java编写SQL,就像Java编译器本身支持SQL语言一样。 所有数据库模式,表,列,过程和其他对象均作为Java对象提供,可以直接在jOOQ SQL API中使用。 …

Springboot + Mybatis + Ehcache

最近在做一个项目,为处理并发性较差的问题,使用了Mybatis二级缓存 但在多表联合查询的情况下,Mybatis二级缓存是存在着数据脏读的问题的 两天就是在想办法解决这个数据脏读的问题 考虑到简易性、性能、兼容性、可扩展性,我选择了s…

Autowired注解

package com.how2java.pojo;import org.springframework.beans.factory.annotation.Autowired;public class Product {private int id;private String name;Autowired// 等价于 Resource(name"c")private Category category;public int getId() {return id;}public …

UVa 100

今天也算是练习了一下记忆化搜索&#xff0c;这道题也包含很多值得注意的地方 1、 输入的两个数不一定前者比后者大 2、 变换的过程中可能会超出int范围 3、 为了不超时可以作下预处理 #include<iostream>#include<cstring>#include<cstdio>using namesp…

jquery.cookie.js 使用方法

Cookies 定义&#xff1a;让网站服务器把少量数据储存到客户端的硬盘或内存&#xff0c;从客户端的硬盘读取数据的一种技术&#xff1b; 下载与引入:jquery.cookie.js基于jquery&#xff1b;先引入jquery&#xff0c;再引入&#xff1a;jquery.cookie.js&#xff1b;下载&…

BizTalk开发系列(十二) Schema设计之Group与Order

更多内容请查看&#xff1a;BizTalk动手实验系列目录 BizTalk 开发系列 开发BizTalk项目的时候会先约定各系统之间往来的消息格式. 由于BizTalk内部唯一使用XML文档。因此消息的格式为XML Schema(XML Schema 用于描述 XML 文档的结构)。虽然BizTalk提供了对于XML消息的验证功能…

深入理解JavaScript系列(32):设计模式之观察者模式

介绍 观察者模式又叫发布订阅模式&#xff08;Publish/Subscribe&#xff09;&#xff0c;它定义了一种一对多的关系&#xff0c;让多个观察者对象同时监听某一个主题对象&#xff0c;这个主题对象的状态发生变化时就会通知所有的观察者对象&#xff0c;使得它们能够自动更新自…

JAXB众所周知的秘密

介绍 我重新发现了Java提供给大众的库。 当我第一次阅读该规范时&#xff0c;我很困惑&#xff0c;以为我需要所有这些特殊工具来实现。 我最近发现&#xff0c;只需要一些注释和一个POJO。 杰克斯 JAXB代表XML绑定的Java体系结构。 这种体系结构允许开发人员将来自类的数据转…

题解:CF1914E-Game with Marbles

题解&#xff1a;CF1914E-Game with Marbles 事先说明一下&#xff0c;本题解不讲解简单数据范围的算法&#xff0c;因为复杂数据范围的就很简单。 这道题的大体意思是这样的&#xff1a;小A有颜色为i(i1~n)的小球a[i]个&#xff0c;小B有颜色为i(i1~n)的小球b[i]个。现在他们…

【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】

标题很难引人入胜&#xff0c;先放个效果图好了 如果图片吸引不了你&#xff0c;那我觉得也就没啥看的了。 demo链接&#xff1a; https://win7killer.github.io/demo_set/html_demo/canvas/can_demo/draw_roll_2.html ************************************************* 上…

原生类型的autoboxing和auto-unboxing

原生类型的autoboxing和auto-unboxing 我们知道&#xff0c;在Java中&#xff0c;int,long等原生类型不是一个继承自Object的类&#xff0c;所以相应的&#xff0c;有很多操作我们都不能利用原生类型操作&#xff0c;比如想要把一个整数放入到一个集合中&#xff0c;我们必须首…

jquery ui datepicker 只能选今天以后的日期

$("input[namebegintime],input[nameendtime],input[nameArrivedate]").datepicker({dateFormat:"yy-mm-dd",minDate: new Date()}); 转载于:https://www.cnblogs.com/y0umer/archive/2012/03/02/3839264.html

全部关于测试–第2部分

这是有关测试系列的第二篇文章。 在第一部分中&#xff0c;我解释了在进行测试开发时需要具备的心态。 或者&#xff0c;换句话说&#xff0c;开发可测试的代码。 在这一部分中&#xff0c;我将介绍一些测试方法的技术。 我将描述的技术可以看作是如何将思维定势转化为行动。 …

简化软件操作,提升用户体验

虽然自己一直都是做网站开发的&#xff0c;没做过什么软件开发&#xff0c;但使用过的软件也不算少。渐渐的发现有些软件真的功能强大&#xff0c;操作性太复杂&#xff0c;于是该软件真的变成了所谓的专业软件&#xff0c;只有经过专业培训的人才能使用。问题是如果不是有很特…

原生js实现简单JSONP

JSONP是一种非常常见的实现跨域请求的方法。其基本思想是利用浏览器中可以跨域请求外链的JS文件&#xff0c;利用这一特性实现数据传输。 用原生JS实现JSONP非常简单&#xff0c;无非几点&#xff1a; 1&#xff09;定义一个函数&#xff0c;用于处理接收到的跨域数据。 2&a…