CSS3动画里的过渡效果
过渡效果中有：
1平滑效果
2线性过渡
3由慢到快
4由快到慢
5慢-快-慢 等等 具体参考 w3chool
例如：
<body>
<div class="out">
<div class="inner1">线性过渡</div>
<div class="inner3">由慢到快</div>
<div class="inner4">由快到慢</div>
<div class="inner2">平滑过渡</div>
<div class="inner5">由慢到快再到慢</div>
</div>
</body>
CSS:
| .out { | |
| width: 800px; | |
| padding: 1px; | |
| background-color: #999999; | |
| } | |
| .out div { | |
| width: 100px; | |
| height: 100px; | |
| margin: 25px; | |
| background-color: #21bbca; | |
| font-size: 12px; | |
| text-align: center; | |
| line-height: 100px; | |
| } | |
| .inner1 { | |
| -webkit-transition: all 4s linear; | |
| } | |
| .inner2 { | |
| -webkit-transition: all 4s ease; | |
| } | |
| .inner3 { | |
| -webkit-transition: all 4s ease-in; | |
| } | |
| .inner4 { | |
| -webkit-transition: all 4s ease-out; | |
| } | |
| .inner5 { | |
| -webkit-transition: all 4s ease-in-out; | |
| } | |
| .out:hover div { | |
| margin-left: 75%; | |
| -webkit-transform: rotate(360deg); | |
| border-radius: 50%; | |
| } |
CSS3动画里的过渡效果的更多相关文章
- 关于JS动画和CSS3动画的性能差异
本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...
- 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的
这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...
- CSS3动画--过渡效果
CSS3动画--过渡效果 transition 设置四个过渡属性 transition-property 过渡的名称 tr ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 【转】CSS3动画帧数科学计算法
本文来源于:财付通TID 原作者:bboy90 总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . —————————————————————– 华丽丽的开篇 ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
- css3动画和jquery动画使用中要注意的问题
前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...
- 转: css3动画简介以及动画库animate.css的使用
~~~ transition animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...
随机推荐
- ReactNative 适合初学的第一个教程demo，找租房
1.下载工程 我看来看去,最让人容易入门的是这个demo: https://github.com/rayshen/PropertyFinder 是英国某开发者做的搜租房的小demo,包含的知识有:图片 ...
- Elasticsearch集群状态脚本及grafana监控面板导出的json文件
脚本文件: #!/usr/bin/env python import datetime import time import urllib import json import urllib2 imp ...
- 使用 JavaScript 实现简单候选项推荐功能（模糊搜索）【收藏】【转】
当我们使用 Google 等搜索功能时,会出现与搜索内容有关的候选项.使用 JavaScript 搜索字符串,通常会使用 indexOf 或者 search 函数,但是非常僵硬,只能搜索匹配特定词语. ...
- Raid与DAN、SAN、NAS基础
一. 磁盘基本知识 1. Raid分类 Raid磁盘阵列是由多个磁盘组合成的磁盘组,可将数据分割成许多区段,分别存放在各个磁盘上:同时利用不同排列技术,可提高磁盘性能和数据安全性.下列简单介绍几种Ra ...
- Python 爬虫2
import urllib.request import os import re import time 设置头文件 head={} head['User-Agent'] ='Mozilla/5.0 ...
- [Network] HTML、XML和JSON学习汇总
写在前面:楼主也是刚刚接触这方面的知识,之前完全是零基础,后来经朋友推荐了几个不错的博文,看完以后豁然开朗.但是此博文更加偏重于基础知识介绍(其实更深的楼主也还不了解,这方面的大神请绕道),只是分享个 ...
- java 环境变量java_home配置多加了 \ 导致zookeeper莫名其妙问题。
平时开发其实不太用得到java_home.path.classpath之类的环境变量,但是在命令行下运行java则需要用上,所以配错就可能出现莫名其妙错误. 错误JAVA_HOME 配置:D:\Pro ...
- 公众平台关注用户达到5万即可开通流量主功能 可以推广APP应用
今天微信公众平台发布发布了一些更新,公众帐号的关注用户达到5万,即可开通流量主功能,之前的是要求10万粉丝,这是一个微信开放的信号.广告主可推广苹果商店应用或腾讯开放平台应用.新增卡片和图文广告规格. ...
- jquery_DOM笔记
回头补充知识: jquery事件复习: bind() 用于绑定多个事件,当某一个节点需要进行多项处理的时候使用 .使用方式 $(select).bind({event:function(),event ...
- 解决 iOS 9.1 微信内置浏览器中html audio 不能自动播放的问题
使用微信现在提供过的微信js-sdk 在ready中进行播放便可. 首先引用js : <script src="http://res.wx.qq.com/open/js/jweixin ...