慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

julygzz

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

查看全部

0 采集收起来源：CSS3中的动画--过渡所需时间 transition-duration
2015-07-23
拖鞋酱

animation-play-state属性主要用来控制元素动画的播放状态。参数：其主要有两个值：running和paused。 span { display: inline-block; width: 20px; height: 20px; background: orange; transform: translateY(90px); -webkit-animation-name: move; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease-in; -webkit-animation-delay: .2s; a-webkit-nimation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:paused; } div:hover span { -webkit-animation-play-state:running; }

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2015-07-23
julygzz

动画--过渡属性 transition-property 在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height” 动画的过渡transition: background-color .5s ease 1s;设置在元素的初始状态上含义是：1s后执行背景颜色的0.5s动画元素需要设置动画初始状态和动画结束状态的css样式第一个值为变化的css样式，可以是单一的，也可以是all，如果是all的话，可以省略不写

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2015-07-23
拖鞋酱

animation-direction属性主要用来设置动画播放方向 normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放; span { display: inline-block; width: 20px; height: 20px; background: orange; transform: translateY(90px); -webkit-animation-name: move; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease-in; -webkit-animation-delay: .2s; -webkit-animation-iteration-count:infinite; -webkit-animation-directio:alternate; }

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2015-07-23
拖鞋酱

animation-iteration-count属性主要用来定义动画的播放次数 div span { display: inline-block; width: 20px; height: 20px; background: green; border-radius: 100%; -webkit-animation-name:move; -webkit-animation-duration: 10s; -webkit-animation-timing-function:ease; -webkit-animation-delay:.1s; -webkit-iteration-count:infinite; }

查看全部

0 采集收起来源：CSS3中设置动画播放次数
2015-07-23
拖鞋酱

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。 div span { display: inline-block; width: 20px; height: 20px; background: green; border-radius: 100%; -webkit-animation-name:move; -webkit-animation-duration: 10s; -webkit-animation-timing-function:ease; -webkit-animation-delay:3s; -webkit-animation-iteration-count:infinite; }

查看全部

0 采集收起来源：CSS3中设置动画开始播放的时间
2015-07-23
拖鞋酱

animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式 animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]* div span { display: inline-block; width: 20px; height: 20px; background: green; border-radius: 100%; -webkit-animation-name:move; -webkit-animation-duration: 10s; -webkit-animation-timing-function:ease; -webkit-animation-delay:.1s; -webkit-animation-iteration-count:infinite; }

查看全部

0 采集收起来源：CSS3中设置动画播放方式
2018-03-22
还是这个我

-webkit chrome,safari -ms ie -o opera -moz firefox

查看全部

0 采集收起来源：什么是CSS3？
2015-07-23
拖鞋酱

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间. 到目前为止支技animation动画的只有webkit内核的浏览器，所以我需要在上面的基础上加上-webkit前缀，据说Firefox5可以支持css3的 animation动画属性 @-webkit-keyframes changeColor { from { background: red; } to { background:green; } } div { width: 200px; height: 200px; background: red; text-align:center; margin: 20px auto; line-height: 200px; color: #fff; } div:hover { -webkit-animation-name: changeColor; -webkit-animation-duration: 5s; -webkit-animation-timing-function: ease-out; -webkit-animation-delay: .1s; }

查看全部

0 采集收起来源：CSS3中设置动画播放时间
2015-07-23
拖鞋酱

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写） @-webkit-keyframes around{ 0% { transform: translateX(0); } 25%{ transform: translateX(180px); } 50%{ transform: translate(180px, 180px); } 75%{ transform:translate(0,180px); } 100%{ transform: translateY(0); } } div { width: 200px; height: 200px; border: 1px solid red; margin: 20px auto; } div span { display: inline-block; width: 20px; height: 20px; background: orange; border-radius: 100%; -webkit-animation-name:around; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 1s; animation-iteration-count:infinite; }

查看全部

0 采集收起来源：CSS3中调用动画
2015-07-23
拖鞋酱

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…} @-webkit-keyframes changecolor{ 0%{ background: red; } 20%{ background:blue; } 40%{ background:orange; } 60%{ background:green; } 80%{ background:yellow; } 100%{ background: red; } } div { width: 300px; height: 200px; background: red; color:#fff; margin: 20px auto; } div:hover { -webkit-animation: changecolor 5s ease-out .2s; }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-07-23
拖鞋酱

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行 .wrapper div { padding: 15px 20px; color: #fff; background-color: orange; position: absolute; top: 50%; left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: all 5s ease-in .2s; transition: all 5s ease-in .2s; }

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2015-07-23
拖鞋酱

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况 div { width: 200px; height: 200px; background-color: orange; margin: 20px auto; border-radius: 100%; -webkit-transition-property: -webkit-border-radius; transition-property: border-radius; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: .2s; transition-delay: .2s; } div:hover { border-radius: 0px; }

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2015-07-23
拖鞋酱

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。 -webkit-transition-duration: 1s; transition-duration: 1s;

查看全部

0 采集收起来源：CSS3中的动画--过渡所需时间 transition-duration
2015-07-23
拖鞋酱

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。 .wrapper div { background: orange; color: #fff; -webkit-transform: skew(15deg); -moz-transform: skew(15deg); transform: skew(15deg); -webkit-transform-origin: top right; -moz-transform-origin: top right; transform-origin: top right; }

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2015-07-23

首页上一页 853 854 855 856 857 858 859 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果