CSS3动画中的位置设定问题
水平居中的不同方法实现:
position: absolute;
margin: auto;
left:;
right:;
position: absolute;
left:%;
-webkit-transform:translateX(-%);
垂直居中的几种实现方法:
position: absolute;
margin:auto ;
top:;
bottom:;
position: absolute;
top:%;
-webkit-transform:translateY(-%);
中心居中的几种方法:
position: absolute;
margin:auto;
top:;
bottom:;
left:;
right:;
position: absolute;
top:%;
left:%;
-webkit-transform:translateX(-%) translateY(-%);
透明度的控制(渐显效果)
@-webkit-keyframes opacity_kf {
% {
opacity: ;
}
% {
opacity: ;
}
}
延时效果的控制:
当使用@keyframes创建动画时,一定要把它捆绑到某个选择器,否则不会产生动画。另外必须定义动画的名称和时长,如果忽略时长,那么动画不允许,因为默认值是0。如果是几个动画延时出现构成的整体动画,那么可以为每个小动画设置不同延时,令他们相继出现,当为一个对象设置不同时间的不同状态时最好使用百分比来规定变化发生的时间,或用关键词“from”“to”等同于0%和100%(分别为动画的开始和结束)。
代码示例如下:
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
@keyframes myfirst
{
% {background: red;}
% {background: yellow;}
% {background: blue;}
% {background: green;}
} @-moz-keyframes myfirst /* Firefox */
{
% {background: red;}
% {background: yellow;}
% {background: blue;}
% {background: green;}
} @-webkit-keyframes myfirst /* Safari 和 Chrome */
{
% {background: red;}
% {background: yellow;}
% {background: blue;}
% {background: green;}
} @-o-keyframes myfirst /* Opera */
{
% {background: red;}
% {background: yellow;}
% {background: blue;}
% {background: green;}
}
@keyframes myfirst
{
% {background: red; left:0px; top:0px;}
% {background: yellow; left:200px; top:0px;}
% {background: blue; left:200px; top:200px;}
% {background: green; left:0px; top:200px;}
% {background: red; left:0px; top:0px;}
} @-moz-keyframes myfirst /* Firefox */
{
% {background: red; left:0px; top:0px;}
% {background: yellow; left:200px; top:0px;}
% {background: blue; left:200px; top:200px;}
% {background: green; left:0px; top:200px;}
% {background: red; left:0px; top:0px;}
} @-webkit-keyframes myfirst /* Safari 和 Chrome */
{
% {background: red; left:0px; top:0px;}
% {background: yellow; left:200px; top:0px;}
% {background: blue; left:200px; top:200px;}
% {background: green; left:0px; top:200px;}
% {background: red; left:0px; top:0px;}
} @-o-keyframes myfirst /* Opera */
{
% {background: red; left:0px; top:0px;}
% {background: yellow; left:200px; top:0px;}
% {background: blue; left:200px; top:200px;}
% {background: green; left:0px; top:200px;}
% {background: red; left:0px; top:0px;}
}
CSS3动画中的位置设定问题的更多相关文章
- CSS3动画中的animation-timing-function效果演示
CSS3动画(animation)属性有如下几个: 属性 值 说明 animation-name name 指定元素要使用的keyframes名称 animation-duration time(ms ...
- css3动画中的steps值详解
css3的动画的animation-timing-function属性定义了动画的速度曲线,一般的速度曲线大家都知道,什么ease,linear,ease-in,ease-out,还有自定义贝塞尔曲线 ...
- css3动画和jquery动画使用中要注意的问题
前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...
- css3动画与js动画的一些理解
http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...
- 【特效】页面滚动到相应位置运行css3动画
请到我的个人博客网站上浏览此文章,欢迎评论和建议. 文章链接:http://www.xiaoxianworld.com/archives/87 现在css3动画很常见了,实际项目中经常应用,特别是那种 ...
- PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题
PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...
- javascript 手势(swipeLeft,swipeRight)滑动中使用css3动画卡顿,开启硬件加速
今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...
- CSS3动画:YouTube的红色激光进度条
本文只是讨论和实现了动画效果,并未将动画与页面实际下载关联,有朋友们问如何应用,可以使用现成的一些插件比如这个,这个,还有这个. 之前一篇文章<CSS3 动画一瞥>简单介绍了CSS3动画相 ...
- css3动画从入门到精通
什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3带来了圆角,半透明,阴影,渐变,多背景图等新的特征,轻松实 ...
随机推荐
- nginx timeout 配置 全局timeout 局部timeout web timeout
nginx比较强大,可以针对单个域名请求做出单个连接超时的配置. 比如些动态解释和静态解释可以根据业务的需求配置 proxy_connect_timeout :后端服务器连接的超时时间_发起握手等候响 ...
- 字符串匹配问题(lfyzoj)
问题描述 字符串中只含有括号 (),[],<>,{},判断输入的字符串中括号是否匹配.如果括号有互相包含的形式,从内到外必须是<>,(),[],{},例如.输入: [()] 输 ...
- Zookeeper + Guava loading cache 实现分布式缓存
1. 概述 项目中,创建的活动内容存入redis,然后需要用到活动内容的地方,从redis去取,然后参与计算. 活动数据的一个特点是更新不频繁.数据量不大.因为项目部署一般是多机器.多实例,除了red ...
- BZOJ4833: [Lydsy1704月赛]最小公倍佩尔数
Problem 传送门 Sol 容易得到 \[f_n=e_{n-1}+f_{n-1},e_{n-1}=f_{n-1}+e_{n-1},f_1=e_1=1\] 那么 \[f_n=2\times \sum ...
- JavaWeb学习总结(八):HttpServletRequest对象
一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...
- React+antd 在限制高度内实现滚动显示多个组件(show scrolled components in a limited height with react antd)
效果: 代码: import React from 'react'; import { Table } from 'antd'; import DatePicker1 from './DatePick ...
- js函数的节流与防抖
一.防抖&节流 在前端开发中有一部分用户行为会频繁的触发事件执行,而对于DOM的操作.资源加载等耗费性能的处理,很可能会导致界面卡顿,甚至浏览器奔溃.函数的节流与防抖就是为了解决类似需求而产生 ...
- swiper移动端日历-1
先上图: 说明:这是基于移动端的,对于PC端浏览器支持不是很好(我测的结果是IE无效),另外这个swiper是4.x版本的 思路: 先引用css <link href="css/ ...
- 微服务&spring cloud架构系列汇总
为了方便查找,把微服务&微服务架构之spring cloud架构系列文章按时间正序整理了一下,记录如下: 1. 微服务架构之spring cloud 介绍 2. 微服务架构之spring ...
- MUI框架-05-用MUI做一个简单App
MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...