css3动画生硬怎么解决

html-css018

css3动画生硬怎么解决,第1张

生硬的比较好的解决办法是调节整体帧数。当然在css中我们更习惯叫自定义动画：

@keyfame

keyfame可以尽最大可能帮你解决生硬的问题。里面可以内置百分比

这个是写了一个keyfame，精确到10%一次变动。看上去就不那么生硬了。你也可以试试。呵呵。但是 要记得配合animation一起使用哦

1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。

2、然后写html结构，只需要一个div元素即可，class名字叫做img

3、设置其边框为不同的颜色，边框宽度设置成100px。

4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。

5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码

6、来看一下最后的效果，还是不错的。

1首先，先在<body></body>中加入门

<div class="leftDoor"></div>

<div class="rightDoor"></div>

2然后写好大门的css，

div{

margin:0

padding:0

}

.door{

width:450px

height:450px

position:relative

background:#a1a1a1

}

.door .leftDoor,.door .rightDoor{

position:absolute

width:224px

height:400px

top:57px

top:50px

background:#d1d1d1

}

.door .leftDoor{

left:0

border-right:1px solid #999

box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1)

}

.door .rightDoor{

right:0

border-left:1px solid #999

transform-origin: 100% 40%

}

先为左边的门添加动画

@-webkit-keyframes leftDoor {

0%,100% {

-webkit-transform-origin: 0% 40%

}

0{

-webkit-transform:perspective(0) rotateY(0)

}

100% {

-webkit-transform:perspective(600px) rotateY(70deg)

}

}

}

@keyframes leftDoor {

0%,100% {

transform-origin: 0% 40%

}

0{

transform:perspective(0) rotateY(0)

}

100% {

transform:perspective(600px) rotateY(70deg)

}

}

然后为右边的门添加css3动画，由于左右门对称，只要变化相应的地方就行了

@-webkit-keyframes rightDoor {

0%,100% {

-webkit-transform-origin: 100% 40%

}

100% {

-o-transform:perspective(600px) rotateY(-70deg)

}

}

@keyframes rightDoor {

0%,100% {

transform-origin: 100% 40%

}

0{

transform:perspective(0) rotateY(0)

}

100% {

transform:perspective(600px) rotateY(-70deg)

}

}

5这里的动画主要用到的是rotate和perspective

6如果想要动画点击后才开门，可以加入一个按钮，然后js控制