码迷,mamicode.com
首页 > Web开发 > 详细

CSS3中transform,transition和animation的简介和用法示例

时间:2015-08-07 11:15:13      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:

transform是一个属性,本质跟width,height是一样的,加上transform也就是为类增加一个变换属性。

transition是一个属性,它是用来控制过渡效果的,因为用transform可以增加变换效果,而那个变换是瞬间突变,如果想让这个变化是平滑的、过渡型的,则要用transition来控制,设定要控制的属性和过渡的时间即可。

animation是动画效果,要先用@keyframes定义一个动画过程,然后在类中用animation的各个参数制定想要添加的动画名称,运行时间,运行次数等等。

/* Float using transition */
.float {
    transition-property: transform;
    transition-duration: .3s;
}
.float:hover {
    transform: translateY(-5px);
}


/* Pulse using animation*/
@keyframes pulse {
    25% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(.9);
    }
}
.pulse { 
.pulse:hover {
    animation-name: pulse;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS3中transform,transition和animation的简介和用法示例

标签:

原文地址:http://blog.csdn.net/juhaotian/article/details/47334959

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!