CSS3动画学习——过度、动画

首先是鼠标移入时,图形进行翻转和变色。主要是css3的过渡效果。

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;/*高宽整体放大*/
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;/*变大*/
height:200px;
transform:rotate(180deg);/*翻转180*/
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}

下面是各个transition属性

属性描述CSS

transition

简写属性,用于在一个属性中设置四个过渡属性。3

transition-property

规定应用过渡的 CSS 属性的名称。3

transition-duration

定义过渡效果花费的时间。默认是 0。3

transition-timing-function

规定过渡效果的时间曲线。默认是 “ease”。3

transition-delay

规定过渡效果何时开始。默认是 0。3

例子:

div
{
transition: width 1s linear 2s; /*过渡css属性名称  过渡时间  过渡速度曲线  过渡延迟 */
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

以上是css3中的过渡,下面看一下css的动画实现效果

@keyframes myFirst {
 0% {background-color:red; left:0px; top:00px;}/*颜色变换  向左偏移和向下偏移*/
 25% {background-color:#282CFB; left:300px; top:0px;}
 50% {background-color:#FF3BF1; left:300px; top:300px;}
 75% {background-color:#282CFB; left:0px; top:300px;}
 100% {background-color:#FF3BF1; left:0px; top:0px;}
}

需要先用keyframes声明一个css选择器↑,声明之后动画才会有效。

div {
 height:100px;
 width:200px;
 background-color:red;
 border:1px solid #B3B3B3;
 position:relative;/*定义绝对位置,动画才有效*/
 animation:myFirst 4s linear 0s 3 alternate;
/*动画选择器的名称、播放时间、动画速度曲线、动画延迟时间、播放次数、播放方式(顺时针和逆时针)  */
}

下面是animation属性

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性,除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 “ease”。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。3
animation-play-state规定动画是否正在运行或暂停。默认是 “running”。3
animation-fill-mode规定对象动画时间之外的状态。3

 

 

分享到:

发表评论

电子邮件地址不会被公开。 必填项已用*标注