Click here to Skip to main content
15,889,874 members
Search within:


Css into WPF XAML only
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
XAML
WPF
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>
Posted
Updated 24-Feb-22 10:19am
v2
Add a Solution
Comments
Richard MacCutchan 23-Feb-22 3:30am    
"Can anyone help me?"
With what? You have not asked a question.
Andreas7 23-Feb-22 4:31am    
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.

2 solutions

Take a look at this excellent CP article: Using CSS Selectors for Styling in WPF[^]

This NuGet might be helpful too: GitHub - warappa/XamlCSS: Style Xaml applications with CSS[^]
 
Share this answer
 
Posted
Comments
Andreas7 23-Feb-22 14:15pm    
Embedding CSS is not my inspiration for the problem, but rather rebuilding the CSS in a storyboard. Nevertheless, thanks for your proposed solution
Solved:
XML
<storyboard x:key="SearchRunning">
            <!--Quadrat 1-->
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat1" 
="" storyboard.targetproperty="X">
                <lineardoublekeyframe keytime="00:00:00.0" value="0">
                <splinedoublekeyframe keytime="00:00:02.0" value="120" keyspline="0.6, 0, 0.4, 1">
                <splinedoublekeyframe keytime="00:00:04.0" value="0" keyspline="0.6, 0, 0.4, 1">
            </splinedoublekeyframe></splinedoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <coloranimationusingkeyframes storyboard.targetname="Quat1" 
="" storyboard.targetproperty="(Shape.Fill).(SolidColorBrush.Color)">
                <linearcolorkeyframe keytime="00:00:00.0" value="#FF004A96">
                <splinecolorkeyframe keytime="00:00:02.0" value="#FF21A0D2" keyspline="0.6, 0, 0.4, 1">
                <splinecolorkeyframe keytime="00:00:03.5" value="#FF004A96" keyspline="0.6, 0, 0.4, 1">
                <linearcolorkeyframe keytime="00:00:04.0" value="#FF004A96">
            </linearcolorkeyframe></splinecolorkeyframe></splinecolorkeyframe></linearcolorkeyframe></coloranimationusingkeyframes>
            <!--Quadrat 2-->
            <!-- Delay 0.44s -->
            <doubleanimationusingkeyframes storyboard.targetname="RotaQuat2" 
="" storyboard.targetproperty="Angle">
                <lineardoublekeyframe keytime="00:00:00.44" value="0">
                <lineardoublekeyframe keytime="00:00:01.04" value="-180">
                <discretedoublekeyframe keytime="00:00:03.10" value="-180">
                <lineardoublekeyframe keytime="00:00:03.70" value="0">
            </lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat2" 
="" storyboard.targetproperty="ScaleX">
                <lineardoublekeyframe keytime="00:00:01.04" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.14" value="1.275">
                <lineardoublekeyframe keytime="00:00:01.34" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.70" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.80" value="1.275">
                <lineardoublekeyframe keytime="00:00:04.00" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat2" 
="" storyboard.targetproperty="ScaleY">
                <lineardoublekeyframe keytime="00:00:01.04" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.14" value="0.675">
                <lineardoublekeyframe keytime="00:00:01.34" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.70" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.80" value="0.675">
                <lineardoublekeyframe keytime="00:00:04.00" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <pointanimationusingkeyframes storyboard.targetname="Quat2" 
="" storyboard.targetproperty="(UIElement.RenderTransformOrigin)">
                <linearpointkeyframe keytime="00:00:00.54" value="-0.5,-0.65">
                <linearpointkeyframe keytime="00:00:00.84" value="-0.417,0.5">
                <linearpointkeyframe keytime="00:00:01.14" value="-0.325,0.5">
                <discretepointkeyframe keytime="00:00:03.80" value="-0.325,0.5">
                <!--LinearPointKeyFrame KeyTime="00:00:04.10" Value="-0.417,0.5"/>
                <linearpointkeyframe keytime="00:00:04.40" value="-0.5,-0.65">
                <linearpointkeyframe keytime="00:00:04.66" value="-0.5,0" --="">
                <linearpointkeyframe keytime="00:00:04.00" value="-0.5,0">
            </linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></discretepointkeyframe></linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></pointanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat2" 
="" storyboard.targetproperty="X">
                <discretedoublekeyframe keytime="00:00:00.44" value="0">
                <lineardoublekeyframe keytime="00:00:00.54" value="-2.5">
                <lineardoublekeyframe keytime="00:00:01.04" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.14" value="5.4">
                <lineardoublekeyframe keytime="00:00:01.34" value="-0.5">
                <discretedoublekeyframe keytime="00:00:03.10" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.20" value="-5.4">
                <lineardoublekeyframe keytime="00:00:03.70" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.80" value="-5.9">
                <lineardoublekeyframe keytime="00:00:04.00" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat2" 
="" storyboard.targetproperty="Y">
                <discretedoublekeyframe keytime="00:00:01.04" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.14" value="3">
                <lineardoublekeyframe keytime="00:00:01.34" value="0">
                <discretedoublekeyframe keytime="00:00:03.09" value="0">
                <lineardoublekeyframe keytime="00:00:03.10" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.15" value="-3.6">
                <lineardoublekeyframe keytime="00:00:03.20" value="-7">
                <lineardoublekeyframe keytime="00:00:03.40" value="-14">
                <lineardoublekeyframe keytime="00:00:03.70" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.80" value="3">
                <lineardoublekeyframe keytime="00:00:04.00" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <!--Quadrat 3-->
            <!-- Delay 0.66s -->
            <doubleanimationusingkeyframes storyboard.targetname="RotaQuat3" 
="" storyboard.targetproperty="Angle">
                <lineardoublekeyframe keytime="00:00:00.66" value="0">
                <lineardoublekeyframe keytime="00:00:01.26" value="-180">
                <discretedoublekeyframe keytime="00:00:02.88" value="-180">
                <lineardoublekeyframe keytime="00:00:03.48" value="0">
            </lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat3" 
="" storyboard.targetproperty="ScaleX">
                <lineardoublekeyframe keytime="00:00:01.26" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.36" value="1.275">
                <lineardoublekeyframe keytime="00:00:01.56" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.48" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.58" value="1.275">
                <lineardoublekeyframe keytime="00:00:03.78" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat3" 
="" storyboard.targetproperty="ScaleY">
                <lineardoublekeyframe keytime="00:00:01.26" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.36" value="0.675">
                <lineardoublekeyframe keytime="00:00:01.56" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.48" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.58" value="0.675">
                <lineardoublekeyframe keytime="00:00:03.78" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <pointanimationusingkeyframes storyboard.targetname="Quat3" 
="" storyboard.targetproperty="(UIElement.RenderTransformOrigin)">
                <linearpointkeyframe keytime="00:00:00.76" value="-0.5,-0.65">
                <linearpointkeyframe keytime="00:00:01.06" value="-0.417,0.5">
                <linearpointkeyframe keytime="00:00:01.36" value="-0.325,0.5">
                <discretepointkeyframe keytime="00:00:03.58" value="-0.325,0.5">
                <linearpointkeyframe keytime="00:00:03.88" value="-0.417,0.5">
                <!--LinearPointKeyFrame KeyTime="00:00:04.18" Value="-0.5,-0.65"/>
                <linearpointkeyframe keytime="00:00:04.44" value="-0.5,0" --="">
                <linearpointkeyframe keytime="00:00:04.00" value="-0.5,0">
            </linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></discretepointkeyframe></linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></pointanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat3" 
="" storyboard.targetproperty="X">
                <discretedoublekeyframe keytime="00:00:00.66" value="0">
                <lineardoublekeyframe keytime="00:00:00.76" value="-2.5">
                <lineardoublekeyframe keytime="00:00:01.26" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.36" value="5.4">
                <lineardoublekeyframe keytime="00:00:01.56" value="-0.5">
                <discretedoublekeyframe keytime="00:00:02.88" value="-0.5">
                <lineardoublekeyframe keytime="00:00:02.98" value="-5.4">
                <lineardoublekeyframe keytime="00:00:03.48" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.58" value="-5.9">
                <lineardoublekeyframe keytime="00:00:03.78" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat3" 
="" storyboard.targetproperty="Y">
                <discretedoublekeyframe keytime="00:00:01.26" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.36" value="3">
                <lineardoublekeyframe keytime="00:00:01.56" value="0">
                <discretedoublekeyframe keytime="00:00:02.87" value="0">
                <lineardoublekeyframe keytime="00:00:02.88" value="-0.5">
                <lineardoublekeyframe keytime="00:00:02.93" value="-3.6">
                <lineardoublekeyframe keytime="00:00:02.98" value="-7">
                <lineardoublekeyframe keytime="00:00:03.18" value="-14">
                <lineardoublekeyframe keytime="00:00:03.48" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.58" value="3">
                <lineardoublekeyframe keytime="00:00:03.78" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <!--Quadrat 4-->
            <!-- Delay 0.88s -->
            <doubleanimationusingkeyframes storyboard.targetname="RotaQuat4" 
="" storyboard.targetproperty="Angle">
                <lineardoublekeyframe keytime="00:00:00.88" value="0">
                <lineardoublekeyframe keytime="00:00:01.48" value="-180">
                <discretedoublekeyframe keytime="00:00:02.66" value="-180">
                <lineardoublekeyframe keytime="00:00:03.26" value="0">
            </lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat4" 
="" storyboard.targetproperty="ScaleX">
                <lineardoublekeyframe keytime="00:00:01.48" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.58" value="1.275">
                <lineardoublekeyframe keytime="00:00:01.78" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.26" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.36" value="1.275">
                <lineardoublekeyframe keytime="00:00:03.56" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat4" 
="" storyboard.targetproperty="ScaleY">
                <lineardoublekeyframe keytime="00:00:01.48" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.58" value="0.675">
                <lineardoublekeyframe keytime="00:00:01.78" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.26" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.36" value="0.675">
                <lineardoublekeyframe keytime="00:00:03.56" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <pointanimationusingkeyframes storyboard.targetname="Quat4" 
="" storyboard.targetproperty="(UIElement.RenderTransformOrigin)">
                <linearpointkeyframe keytime="00:00:00.98" value="-0.5,-0.65">
                <linearpointkeyframe keytime="00:00:01.28" value="-0.417,0.5">
                <linearpointkeyframe keytime="00:00:01.58" value="-0.325,0.5">
                <discretepointkeyframe keytime="00:00:03.36" value="-0.325,0.5">
                <linearpointkeyframe keytime="00:00:03.66" value="-0.417,0.5">
                <linearpointkeyframe keytime="00:00:03.96" value="-0.5,-0.65">
                <!--LinearPointKeyFrame KeyTime="00:00:04.22" Value="-0.5,0"/-->
                <linearpointkeyframe keytime="00:00:04.00" value="-0.5,0">
            </linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></discretepointkeyframe></linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></pointanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat4" 
="" storyboard.targetproperty="X">
                <discretedoublekeyframe keytime="00:00:00.88" value="0">
                <lineardoublekeyframe keytime="00:00:00.98" value="-2.5">
                <lineardoublekeyframe keytime="00:00:01.48" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.58" value="5.4">
                <lineardoublekeyframe keytime="00:00:01.78" value="-0.5">
                <discretedoublekeyframe keytime="00:00:02.66" value="-0.5">
                <lineardoublekeyframe keytime="00:00:02.76" value="-5.4">
                <lineardoublekeyframe keytime="00:00:03.26" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.36" value="-5.9">
                <lineardoublekeyframe keytime="00:00:03.56" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat4" 
="" storyboard.targetproperty="Y">
                <discretedoublekeyframe keytime="00:00:01.48" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.58" value="3">
                <lineardoublekeyframe keytime="00:00:01.78" value="0">
                <discretedoublekeyframe keytime="00:00:02.65" value="0">
                <lineardoublekeyframe keytime="00:00:02.66" value="-0.5">
                <lineardoublekeyframe keytime="00:00:02.71" value="-3.6">
                <lineardoublekeyframe keytime="00:00:02.76" value="-7">
                <lineardoublekeyframe keytime="00:00:02.96" value="-14">
                <lineardoublekeyframe keytime="00:00:03.26" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.36" value="3">
                <lineardoublekeyframe keytime="00:00:03.56" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <!--Quadrat 5-->
            <!-- Delay 1.1s -->
            <doubleanimationusingkeyframes storyboard.targetname="RotaQuat5" 
="" storyboard.targetproperty="Angle">
                <lineardoublekeyframe keytime="00:00:01.10" value="0">
                <lineardoublekeyframe keytime="00:00:01.70" value="-180">
                <discretedoublekeyframe keytime="00:00:02.44" value="-180">
                <lineardoublekeyframe keytime="00:00:03.04" value="0">
            </lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat5" 
="" storyboard.targetproperty="ScaleX">
                <lineardoublekeyframe keytime="00:00:01.70" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.80" value="1.275">
                <lineardoublekeyframe keytime="00:00:02.00" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.04" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.14" value="1.275">
                <lineardoublekeyframe keytime="00:00:03.34" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat5" 
="" storyboard.targetproperty="ScaleY">
                <lineardoublekeyframe keytime="00:00:01.70" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.80" value="0.675">
                <lineardoublekeyframe keytime="00:00:02.00" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.04" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.14" value="0.675">
                <lineardoublekeyframe keytime="00:00:03.34" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <pointanimationusingkeyframes storyboard.targetname="Quat5" 
="" storyboard.targetproperty="(UIElement.RenderTransformOrigin)">
                <linearpointkeyframe keytime="00:00:01.20" value="-0.5,-0.65">
                <linearpointkeyframe keytime="00:00:01.50" value="-0.417,0.5">
                <linearpointkeyframe keytime="00:00:01.70" value="-0.325,0.5">
                <discretepointkeyframe keytime="00:00:03.14" value="-0.325,0.5">
                <linearpointkeyframe keytime="00:00:03.44" value="-0.417,0.5">
                <linearpointkeyframe keytime="00:00:03.74" value="-0.5,-0.65">
                <linearpointkeyframe keytime="00:00:04.00" value="-0.5,0">
            </linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></discretepointkeyframe></linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></pointanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat5" 
="" storyboard.targetproperty="X">
                <discretedoublekeyframe keytime="00:00:01.10" value="0">
                <lineardoublekeyframe keytime="00:00:01.20" value="-2.5">
                <lineardoublekeyframe keytime="00:00:01.70" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.80" value="5.4">
                <lineardoublekeyframe keytime="00:00:02.00" value="-0.5">
                <discretedoublekeyframe keytime="00:00:02.44" value="-0.5">
                <lineardoublekeyframe keytime="00:00:02.54" value="-5.4">
                <lineardoublekeyframe keytime="00:00:03.04" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.14" value="-5.9">
                <lineardoublekeyframe keytime="00:00:03.34" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat5" 
="" storyboard.targetproperty="Y">
                <discretedoublekeyframe keytime="00:00:01.70" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.80" value="3">
                <lineardoublekeyframe keytime="00:00:02.00" value="0">
                <discretedoublekeyframe keytime="00:00:02.43" value="0">
                <lineardoublekeyframe keytime="00:00:02.44" value="-0.5">
                <lineardoublekeyframe keytime="00:00:02.49" value="-3.6">
                <lineardoublekeyframe keytime="00:00:02.54" value="-7">
                <lineardoublekeyframe keytime="00:00:02.74" value="-14">
                <lineardoublekeyframe keytime="00:00:03.04" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.14" value="3">
                <lineardoublekeyframe keytime="00:00:03.34" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
        </storyboard>
 
Share this answer
 
Posted
Updated 24-Feb-22 12:21pm
v2
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Is it possible to put this code in XAML WPF ?
How to create a json editor in XAML WPF
CSS @keyframe in WPF
XAML NameSpace in WPF ?
In WPF, how do I bind changeable values from codebehind into animation in XAML?
Problem in XAML binding in treeview to the property visibility
How to make shape in XAML WPF?
XAML Debugging
Fxcop for analyzinf WPF XAML code
Where to go C#,XAML or HTML 5

Advertise
Privacy
Cookies
Terms of Use
Last Updated 24 Feb 2022
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web03 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900