Html 瞄准后的动画

正文{
背景颜色：灰色；
宽度：1024；
身高：768；
}
#登录{
背景颜色：蓝色；
高度：50px；
宽度：190px；
位置：相对位置；
顶部：550px；
左：650px；
}
#普洛金{
字体大小：42px；
左侧填充：35px；
字体系列：Arial、Helvetica、无衬线字体；
}
#伊迪斯科{
位置：相对位置；
顶部：85px；
左：550px；
宽度：405px；
高度：360px；
}
#伊特维特{
位置：相对位置；
底部：400px；
左：700px；
高度：75px；
宽度：75px；
动画名称：idITwitter；
动画持续时间：5s；
动画计时功能：放松；
动画延迟：0s；
动画方向：正常；
动画迭代次数：无限；
动画填充模式：无；
动画播放状态：暂停；
}
.IMTwitter{
位置：相对位置；
底部：400px；
左：700px；
高度：75px；
宽度：75px；
动画名称：ClassimWitter；
动画持续时间：5s；
动画计时功能：放松；
动画延迟：0s；
动画方向：正常；
动画迭代次数：无限；
动画填充模式：无；
动画播放状态：运行；
}
@关键帧{
0% {
底部：400px；
左：700px；
}
95% {
底部：106px；
}
}
@关键帧ClassimWitter{
0% {
-webkit变换：旋转（70度）；
-moz变换：旋转（70度）；
-ms变换：旋转（70度）；
-o变换：旋转（70度）；
变换：旋转（70度）；
}
100% {
}
}

媒体狂人
登录

由于id和class都引用相同的

img

，您可以省略类并在animation属性上添加两个动画，如下所示：

#ITwitter {
...
animation-name: idITwitter, classIMTwitter;
...
}

工作代码段：

正文{
背景颜色：灰色；
宽度：1024；
身高：768；
}
#登录{
背景颜色：蓝色；
高度：50px；
宽度：190px；
位置：相对位置；
顶部：550px；
左：650px；
}
#普洛金{
字体大小：42px；
左侧填充：35px；
字体系列：Arial、Helvetica、无衬线字体；
}
#伊迪斯科{
位置：相对位置；
顶部：85px；
左：550px；
宽度：405px；
高度：360px；
}
#伊特维特{
位置：相对位置；
底部：400px；
左：700px；
高度：75px；
宽度：75px；
动画名称：idITwitter，ClassimWitter；
动画持续时间：5s；
动画计时功能：放松；
动画延迟：0s；
动画方向：正常；
动画迭代次数：无限；
动画填充模式：无；
/*动画播放状态：暂停*/
}
@关键帧{
0% {
底部：400px；
左：700px；
}
95% {
底部：106px；
}
}
@关键帧ClassimWitter{
0% {
-webkit变换：旋转（70度）；
-moz变换：旋转（70度）；
-ms变换：旋转（70度）；
-o变换：旋转（70度）；
变换：旋转（70度）；
}
100% { 
}
}

登录

为什么不使用动画速记属性？此外，不再需要使用

-o

供应商前缀。它被用来支持一个完全没有市场份额的Opera版本。