I try to rebuild the following CSS in WPF. But I'm stuck or have a lump in my brain. Can anyone help me?
I have no idea how to finalize the implementation of the CSS in WPF Storyboard. The cube moving and hopping was still possible but the bouncing effect of the bouncing dice makes me problems to integrate the storyboard SearchRunning.
@keyframes moving {
0%, 5% {
left: 0;
background-color: #039be5;
}
95%, 100% {
left: calc(100% - 18px);
background-color: #84d6fd;
}
}
@keyframes box-2-anim {
0% {
transform: scale(1, 1) rotate(0deg);
bottom: 0;
}
5% {
bottom: 18px;
}
15% {
bottom: 0;
transform: scale(1, 1) rotate(-180deg);
}
17.001% {
bottom: 0;
transform: translate(5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(-180deg);
}
25% {
bottom: 0;
transform: scale(1, 1) rotate(-180deg);
}
66% {
transform: scale(1, 1) rotate(-180deg);
bottom: 0;
}
71% {
bottom: 18px;
}
81% {
bottom: 0;
transform: scale(1, 1) rotate(0deg);
}
83.001% {
bottom: 0;
transform: translate(-5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(0deg);
}
91% {
transform: scale(1, 1) rotate(0deg);
}
100% {
transform: scale(1, 1) rotate(0deg);
}
}
@keyframes box-3-anim {
0% {
transform: scale(1, 1) rotate(0deg);
bottom: 0;
}
5% {
bottom: 18px;
}
15% {
bottom: 0;
transform: scale(1, 1) rotate(-180deg);
}
17.001% {
bottom: 0;
transform: translate(5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(-180deg);
}
25% {
bottom: 0;
transform: scale(1, 1) rotate(-180deg);
}
56% {
transform: scale(1, 1) rotate(-180deg);
bottom: 0;
}
61% {
bottom: 18px;
}
71% {
bottom: 0;
transform: scale(1, 1) rotate(0deg);
}
73.001% {
bottom: 0;
transform: translate(-5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(0deg);
}
81% {
transform: scale(1, 1) rotate(0deg);
}
100% {
transform: scale(1, 1) rotate(0deg);
}
}
@keyframes box-4-anim {
0% {
transform: scale(1, 1) rotate(0deg);
bottom: 0;
}
5% {
bottom: 18px;
}
15% {
bottom: 0;
transform: scale(1, 1) rotate(-180deg);
}
17.001% {
bottom: 0;
transform: translate(5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(-180deg);
}
25% {
bottom: 0;
transform: scale(1, 1) rotate(-180deg);
}
45% {
transform: scale(1, 1) rotate(-180deg);
bottom: 0;
}
50% {
bottom: 18px;
}
60% {
bottom: 0;
transform: scale(1, 1) rotate(0deg);
}
62.001% {
bottom: 0;
transform: translate(-5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(0deg);
}
70% {
transform: scale(1, 1) rotate(0deg);
}
100% {
transform: scale(1, 1) rotate(0deg);
}
}
@keyframes box-5-anim {
0% {
transform: scale(1, 1) rotate(0deg);
bottom: 0;
}
5% {
bottom: 18px;
}
15% {
bottom: 0;
transform: scale(1, 1) rotate(-180deg);
}
17.001% {
bottom: 0;
transform: translate(5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(-180deg);
}
25% {
bottom: 0;
transform: scale(1, 1) rotate(-180deg);
}
33% {
transform: scale(1, 1) rotate(-180deg);
bottom: 0;
}
38% {
bottom: 18px;
}
48% {
bottom: 0;
transform: scale(1, 1) rotate(0deg);
}
50.001% {
bottom: 0;
transform: translate(-5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(0deg);
}
58% {
transform: scale(1, 1) rotate(0deg);
}
100% {
transform: scale(1, 1) rotate(0deg);
}
}
.loading-container {
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.box-loading {
width: 138px;
height: 18px;
position: relative;
margin: 0 auto;
}
.box-loading > .box {
position: absolute;
width: 18px;
height: 18px;
border-radius: 3.6px;
background-color: #007bff;
transform-origin: -6px 9px;
box-shadow: 0 0 6px 2px rgba(40, 139, 171, 0.15);
}
.box-loading > .box:nth-child(1) {
left: 0px;
background-color: #06abfc;
}
.box-loading > .box:nth-child(2) {
left: 30px;
background-color: #1fb4fc;
animation: box-2-anim 2s infinite linear;
animation-delay: 0.2222222222s;
}
.box-loading > .box:nth-child(3) {
left: 60px;
background-color: #38bcfc;
animation: box-3-anim 2s infinite linear;
animation-delay: 0.3333333333s;
}
.box-loading > .box:nth-child(4) {
left: 90px;
background-color: #51c5fd;
animation: box-4-anim 2s infinite linear;
animation-delay: 0.4444444444s;
}
.box-loading > .box:nth-child(5) {
left: 120px;
background-color: #6acdfd;
animation: box-5-anim 2s infinite linear;
animation-delay: 0.5555555556s;
}
.box-loading > .box:nth-child(1) {
background-color: #039be5;
animation: moving 1s infinite cubic-bezier(0.6, 0, 0.4, 1) alternate;
}
What I have tried:
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp3"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Storyboard x:Key="SearchRunning" RepeatBehavior="2x" AutoReverse="True" >
<!--Quadrat 1-->
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0"
Storyboard.TargetName="TransQuat1"
Storyboard.TargetProperty="X">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0" />
<EasingDoubleKeyFrame KeyTime="00:00:02.4" Value="114" >
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Quat1"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<LinearColorKeyFrame KeyTime="00:00:00.5" Value="#FF004A96" />
<LinearColorKeyFrame KeyTime="00:00:02" Value="#FF21A0D2" />
</ColorAnimationUsingKeyFrames>
<!--Quadrat 2-->
<PointAnimationUsingKeyFrames Storyboard.TargetName="Quat2"
Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
<LinearPointKeyFrame KeyTime="00:00:00.7" Value="-0.5,-0.65"/>
<LinearPointKeyFrame KeyTime="00:00:01.4" Value="-0.5,0.5"/>
</PointAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TransQuat2"
Storyboard.TargetProperty="X">
<EasingDoubleKeyFrame KeyTime="00:00:00.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.7" Value="-2.5"/>
<EasingDoubleKeyFrame KeyTime="00:00:01.4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RotaQuat2"
Storyboard.TargetProperty="Angle">
<EasingDoubleKeyFrame KeyTime="00:00:00.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:01.4" Value="-180"/>
</DoubleAnimationUsingKeyFrames>
<!--Quadrat 3-->
<PointAnimationUsingKeyFrames Storyboard.TargetName="Quat3"
Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
<LinearPointKeyFrame KeyTime="00:00:00.9" Value="-0.5,-0.65"/>
<LinearPointKeyFrame KeyTime="00:00:01.6" Value="-0.5,0.5"/>
</PointAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TransQuat3"
Storyboard.TargetProperty="X">
<EasingDoubleKeyFrame KeyTime="00:00:00.8" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.9" Value="-2.5"/>
<EasingDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RotaQuat3"
Storyboard.TargetProperty="Angle">
<EasingDoubleKeyFrame KeyTime="00:00:00.8" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:01.6" Value="-180"/>
</DoubleAnimationUsingKeyFrames>
<!--Quadrat 4-->
<PointAnimationUsingKeyFrames Storyboard.TargetName="Quat4"
Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
<LinearPointKeyFrame KeyTime="00:00:01.1" Value="-0.5,-0.65"/>
<LinearPointKeyFrame KeyTime="00:00:01.8" Value="-0.5,0.5"/>
</PointAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TransQuat4"
Storyboard.TargetProperty="X">
<EasingDoubleKeyFrame KeyTime="00:00:01.0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:01.1" Value="-2.5"/>
<EasingDoubleKeyFrame KeyTime="00:00:01.8" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RotaQuat4"
Storyboard.TargetProperty="Angle">
<EasingDoubleKeyFrame KeyTime="00:00:01.0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:01.8" Value="-180"/>
</DoubleAnimationUsingKeyFrames>
<!--Quadrat 5-->
<PointAnimationUsingKeyFrames Storyboard.TargetName="Quat5"
Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
<LinearPointKeyFrame KeyTime="00:00:01.3" Value="-0.5,-0.65"/>
<LinearPointKeyFrame KeyTime="00:00:02.0" Value="-0.5,0.5"/>
</PointAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TransQuat5"
Storyboard.TargetProperty="X">
<EasingDoubleKeyFrame KeyTime="00:00:01.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:01.3" Value="-2.5"/>
<EasingDoubleKeyFrame KeyTime="00:00:02.0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RotaQuat5"
Storyboard.TargetProperty="Angle">
<EasingDoubleKeyFrame KeyTime="00:00:01.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:02.0" Value="-180"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="SearchBouncing" >
<PointAnimationUsingKeyFrames Storyboard.TargetName="Quattest"
Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
<LinearPointKeyFrame KeyTime="00:00:01.1" Value="0.5,1"/>
</PointAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
Storyboard.TargetName="Quattest">
<LinearDoubleKeyFrame KeyTime="00:00:01.2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="00:00:01.6" Value="0.6"/>
<LinearDoubleKeyFrame KeyTime="00:00:01.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
Storyboard.TargetName="Quattest">
<LinearDoubleKeyFrame KeyTime="00:00:01.2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="00:00:01.6" Value="1.3"/>
<LinearDoubleKeyFrame KeyTime="00:00:01.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<Rectangle x:Name="Quat1" Fill="#FF004A96"
HorizontalAlignment="Left" VerticalAlignment="Top"
Height="18" Width="18" RadiusX="4" RadiusY="4" Margin="100,50,0,0"
Opacity="1" IsHitTestVisible="False" RenderTransformOrigin="1, 1">
<Rectangle.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="TransQuat1" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Quat2" Fill="#FF0860A5"
HorizontalAlignment="Left" VerticalAlignment="Top"
Height="18" Width="18" RadiusX="4" RadiusY="4" Margin="130,50,0,0"
Opacity="1" IsHitTestVisible="False" RenderTransformOrigin="-0.5, 0">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="ScaleQuat2" ScaleX="1" ScaleY="1"/>
<RotateTransform x:Name="RotaQuat2" Angle="0" CenterX="0" CenterY="0"/>
<TranslateTransform x:Name="TransQuat2" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Quat3" Fill="#FF147EBA"
HorizontalAlignment="Left" VerticalAlignment="Top"
Height="18" Width="18" RadiusX="4" RadiusY="4" Margin="160,50,0,0"
Opacity="1" IsHitTestVisible="False" RenderTransformOrigin="-0.5, 0">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="ScaleQuat3" ScaleX="1" ScaleY="1"/>
<RotateTransform x:Name="RotaQuat3" Angle="0" CenterX="0" CenterY="0"/>
<TranslateTransform x:Name="TransQuat3" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Quat4" Fill="#FF1C93C9"
HorizontalAlignment="Left" VerticalAlignment="Top"
Height="18" Width="18" RadiusX="4" RadiusY="4" Margin="190,50,0,0"
Opacity="1" IsHitTestVisible="False" RenderTransformOrigin="-0.5, 0">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="ScaleQuat4" ScaleX="1" ScaleY="1"/>
<RotateTransform x:Name="RotaQuat4" Angle="0" CenterX="0" CenterY="0"/>
<TranslateTransform x:Name="TransQuat4" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Quat5" Fill="#FF21A0D2"
HorizontalAlignment="Left" VerticalAlignment="Top"
Height="18" Width="18" RadiusX="4" RadiusY="4" Margin="220,50,0,0"
Opacity="1" IsHitTestVisible="False" RenderTransformOrigin="-0.5, 0">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="ScaleQuat5" ScaleX="1" ScaleY="1"/>
<RotateTransform x:Name="RotaQuat5" Angle="0" CenterX="0" CenterY="0"/>
<TranslateTransform x:Name="TransQuat5" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Quattest" Fill="#FF21A0D2"
HorizontalAlignment="Left" VerticalAlignment="Top"
Height="18" Width="18" RadiusX="4" RadiusY="4" Margin="50,90,0,0"
Opacity="1" IsHitTestVisible="False" RenderTransformOrigin="-0.5, 0">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Window>