动画（Animation）来回变换

最新推荐文章于 2024-05-06 19:28:55 发布
最新推荐文章于 2024-05-06 19:28:55 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： 效果初现 文章标签： 动画Animation来回变换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT666DHW/article/details/78128004
版权
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画（Animation）来回变换</title>
<style>
@-webkit-keyframes 'myAnimation'{
/* 1.从左至右滑动 */
/*  
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 250px;
background: orange;
}
60% {
margin-left: 350px;
background: blue;
}
100% {
margin-left: 1000px;
background: red;
}*/
 
/* 2.从上至下滑动 */
0% {
margin-top:: 100px;
background: green;
}
40% {
margin-top: 250px;
background: orange;
}
60% {
margin-top: 350px;
background: blue;
}
100% {
margin-top: 1000px;
background: red;
}
  }




div{
color:#0FC;
width:218px;
height:218px; 
line-height:218px;
background-color:#F93;
-webkit-animation-name:'myAnimation'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-delay:2s; /*动画延迟时间*/
-webkit-animation-duration:2s; /*动画持续时间*/
-webkit-animation-timing-function:ease-in-out;  /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-iteration-count:3; /*定义循环资料，infinite为无限次*/
-webkit-animation-direction:alternate; /*定义动画方式*/
}
</style>
</head>


<body>


<center>
<div> 动画（Animation）</div>
</center>


</body>
</html>
Dewey666
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3初体验之animation简单动画例子【来回滑动的小球】
且听风吟
08-17 8322
Document div{width: 200px;height: 200px;border: 1px dashed green;} div span{ display:inline-block; width: 30px; height: 30px; border-radius: 100%; background-color: red; animat
animation 循环_animation
weixin_39763033的博客
11-25 1671
Animation指定一个周期持续时间内的动画。当然需要该属性支持动画。使用时需要指定周期时间和关键帧名称上述代码鼠标放在div上会执行名为move的动画，持续时间为4秒。@keyframes move定义关键帧，按上述比例将时间分为5个关键帧节点，没到达一个关键帧执行当前关键帧语句。Animation 共有8个属性分别如下。animation-name'>：检索或设置对象所应用的...
js来回动画
aju90208的博客
04-17 173
setInterval(function(){ $(".m-capabilities-bg1 i,.m-capabilities-bg2 i,.m-capabilities-bg3 i").toggleClass('ani-learn'); $(".m-capabilities-bg4 dd").toggleClass('ani-p...
android 动画变换,Android 动画基础-变换动画(Twen Animation)
weixin_42511091的博客
05-25 234
Android中有四大动画，它们分别是：变换动画(Tween Animation)，帧动画(frame Animation)，布局动画(layout Animation),属性动画(Property Animation )。今天我在这里简单的说下变换动画。Animation的通用属性xml属性java方法解释android：detachWallpapersetDetachWallpaper(boo...
前端css中animation(动画)的使用
最新发布
小蜗牛764号的博客
05-06 2127
animation常伴随着动画帧`@keyframes`一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。 animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如`“animation:”+后面各属性的值，用空格隔开+“；”`的形式设置动画效果。举例如：`animation: box1 3s linear 2s infinite;`
android动画来回运动,ImageView自动来回循环移动和随手移动的结合，用到Animation...
weixin_39979332的博客
05-25 390
随着学习，经验是增加了，但是还是很缺少经验，我分享这个代码只是更大家分享小小的成果，顺便永久性保存这个代码，以后用到的时候可以拿来就用，需要改正也是很方便的，毕竟自己动脑子写的，每一步的功能都理解的很清楚。package com.example.coin;import android.os.Bundle;import android.annotation.SuppressLint;import a...
gif 2D动画
12-10
这只是一个简单的例子，实际的2D动画可以包含更复杂的变换，如旋转、缩放、颜色变化等。 在JavaScript中，可以使用库如`createjs`或`pixi.js`来实现更复杂的2D动画。这些库提供了丰富的API，允许开发者创建、管理和...
CSS3 animation实现简易幻灯片轮播特效
09-24
最后，`transform-origin` 属性设置了动画变换的中心点，这里是元素的中心。 总结来说，通过CSS3的animation和关键帧，我们可以轻松创建一个简易的幻灯片轮播特效，无需JavaScript的介入。这种方法对于那些只需要...
android 简单图片动画播放的实例代码
09-05
通过`setRepeatCount`和`setRepeatMode`，我们可以让动画无限循环并反向播放，使得图片在透明和不透明之间来回切换，形成一种闪烁的效果。 总结来说，Android中的图片动画可以通过`ImageView`配合各种动画类（如`...
css3按钮渐变动画特效
07-24
这个动画在鼠标悬停时，会让背景的位置在左右之间来回移动，创造出流光效果。`2s`是动画的持续时间，`infinite`表示无限循环。 另外，为了使按钮更具交互感，我们还可以添加过渡效果。`transition`属性允许我们在...
纯CSS3热气球云朵动画特效
06-24
例如，我们可以创建一个动画，使云朵在屏幕上来回飘动，或者让热气球有节奏地上升和下降。 实现这个特效时，首先我们需要创建HTML结构，包括热气球和云朵的元素。然后，利用CSS3的属性来定义它们的形状、颜色、大小...
animation动画之汽车往返运动
u010234868的专栏
04-01 465
HTML代码： <!-- car --> <img class="car" src="images/car.jpg" alt=""> CSS代码： /*car*/ .car { animation: car 2s infinite; } @keyframes car { 0% { transform: translate3d(1000px, 0, 0); } 50% { transform: translate3d(0, 0, 0) rotateY(180deg);
iOS动画-来回切换多张图片产生动态效果
Leemin_ios的博客
07-27 3915
方法1：使用定时器按时切换动画 //定义结构体，方块大小 CGRect frame=CGRectMake(13.5, 11.5, 22, 22); //初始化图像视图对象，大小是frame _musicImageView = [[UIImageView alloc] initWithFrame:frame]; _musicImage
7.6 animation动画如果要像transition一样自带返回动画效果
又一个四季在轮回
07-06 251
animation动画如果要像transition一样自带返回动画效果，而不是突然一帧变成初始状态，应该设0%和100%同一个状态，让50%设置为自己想要的效果： 例如：分销项目go动画： .go{ width: 120rpx; height: 120rpx; margin: 18rpx 20rpx 16rpx 562rpx; animation: updown ease 2.2s infinite; } @keyframes updown { .
让一个ImageView在屏幕中来回运动
gundumw100的专栏
04-10 753
已不再推荐补间动画，请使用属性动画； http://blog.csdn.net/guolin_blog/article/details/43536355 http://blog.csdn.net/guolin_blog/article/details/43816093 onCreate()中: iv=(ImageView)this.findViewById(R.id.iv);
html动画效果结束返回,animation动画结束后css样式怎么保留最后状态
weixin_39815943的博客
06-04 711
问题css属性animation动画可以轻松地给页面带来很炫很酷的效果，但是有时候我们会遇到这个问题，动画结束后css状态会返回到初始状态，那么这并不是我们想要的，我们希望动画结束后css状态达到最后的模样。解决方案为了达到这个效果，可以给个css样式：(animation-fill-mode:forwards)。animation-fill-mode属性介绍animation-fill-mode...
animation属性
qq_37805832的博客
09-18 688
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>101-动画模块-其它属性上</title> <style> *{ margin: 0; padding: 0; } div { width:
使用css动画animation及@keyframes实现图片持续放大缩小动画展示
xiaoming4965的博客
01-12 1068
【代码】使用css动画animation及@keyframes实现图片持续放大缩小动画展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值